Макетная разметка не центрирована

Я реализовал макет, но классы div не центрируются в середине экрана. 4 класса по всей ширине экрана влево и вправо должны быть одинаковыми. Я пытаюсь сосредоточить его в середине тега div обертки. Спасибо за помощь. Проверьте свой веб-сайт в прямом эфире: www.problemsofnewyork.com/test.php Макетная разметка не центрирована

index.php

<?php include_once('php/db.php'); ?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Welcome</title> 
    <link rel="stylesheet" href="css/test.css"/> 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script> 
</head> 

<body> 
    <div id="wrapper"> 
     <div class="grid"> 
      <?php 
       $result = $db -> prepare ("SELECT * FROM news ORDER BY id DESC"); 
       $result->execute(); 

       while($row = $result->fetch(PDO::FETCH_ASSOC)){ 

        $id = $row['id']; 
        $title = $row['title']; 
        $content = $row['content']; 
        $image = $row['image']; 
        $posted_by = $row['posted']; 

        echo " 
        <div class='grid-item'> 
         <img src='images/".$image."'/> 
         <b>".$title."</b> 
         <p>".$id.") ". $content ."</p> 
         <span>Posted by: <i>".$posted_by."</i></span> 
        </div> 
        "; 

       } 
      ?> 
     </div> 
     </div> 
    <script> 
     $('.grid').masonry({ 
      itemSelector: '.grid-item' 
     }); 
     var $container = $('.grid'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.grid-item' 
      }); 
     }); 
    </script> 

</body> 
</html>

и CSS

* { 
margin: 0; 
padding: 0; 
} 

body { 
    background: #e9e9e9; 
} 
#wrapper { 
    width: 90%; 
    height: auto; 
    overflow: hidden; 
    margin: 0 auto 
} 
.grid { 
    width: 90%; 
    margin: 15px auto; 
} 
.grid-item { 
    width: 340px; 
    background: #fff; 
    float: left; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22); 
} 
.grid-item b { 
    padding: 5px; 
    word-wrap: break-word; 
} 
.grid-item p { 
    padding: 5px; 
    font-size: 13px; 
    word-wrap: break-word; 
} 
.grid-item span { 
    float: right; 
    padding: 5px; 
    font-family: monospace; 
} 
.grid-item img { 
    width: 100%; 
}

источник

2015-06-07 alb tr

этот вопрос не имеет ничего общего с PHP – samayo

Пожалуйста, удалите все PHP из вашего вопроса, потому что это не имеет отношения. Вместо этого отправьте HTML-код для [Short, Self Contained, Correct, Example] (http://sscce.org/) – Beat

Ничего. Добавление isFitWidth: true сделало трюк.

Этот код:

<script> 
    $('.grid').masonry({ 
     itemSelector: '.grid-item' 
    }); 
    var $container = $('.grid'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.grid-item' 
     }); 
    }); 
</script>

к этому:

<script> 
    $('.grid').masonry({ 
     itemSelector: '.grid-item' 
    }); 
    var $container = $('.grid'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.grid-item', 
     isFitWidth: true 
     }); 
    }); 
</script>

источник

2015-06-07 22:30:23

На самом деле, если вы это разработали, он может * на самом деле быть ответом .... – Marco13

Макетная разметка не центрирована

ответ

Смежные вопросы