砌體布局未居中

Question

我實現了砌體布局，但是div類不在屏幕中間居中。 屏幕上左右中間的四個寬度必須相同。 我試圖將其完美地定位在包裝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 個解決方案

解決方案1
0 已采納 2015-06-07 22:30:23

砌體布局未居中

問題描述

1 個解決方案

解決方案1 0 已采納 2015-06-07 22:30:23

解決方案1
0 已采納 2015-06-07 22:30:23