Макет кладки не по центру

Я реализовал макет каменной кладки, но классы 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%;
}

javascript html jquery masonry jquery-masonry
person alb tr    schedule 07.06.2015    source источник
comment
этот вопрос не имел ничего общего с php   -  person samayo    schedule 08.06.2015
comment
Пожалуйста, удалите весь PHP из вашего вопроса, потому что это не имеет значения. Вместо этого опубликуйте HTML-код для краткого, самостоятельного, правильного примера.   -  person Beat    schedule 08.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

Не берите в голову. Добавление 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>
person alb tr    schedule 07.06.2015