Question

我实现了一个砌体布局，但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%;
}

Answer 1

没关系。添加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>

砌体布局不居中

1 个答案: