Html 使用流体布局删除砌体容器的多余间距_Html_Css_Jquery Masonry_Fluid Layout

Html 使用流体布局删除砌体容器的多余间距

html css

Html 使用流体布局删除砌体容器的多余间距,html,css,jquery-masonry,fluid-layout,Html,Css,Jquery Masonry,Fluid Layout,我正试图创建一个图像库使用砌体和图像重新排序时，浏览器的大小但是，由于我对缩略图使用固定宽度150px（因此未加载实际的大图像文件），但我无法删除图像容器侧面的访问间距，因为它将根据屏幕大小进行缩放，因为宽度使用百分比现场布局如下图所示：请注意，图像容器右侧的间距过大。总之如何使容器缩放到砌体图像栅格的大小，因为图像容器是基于宽度通过百分比计算的将图像固定为150像素的宽度有意义吗？如果没有，对于不同大小的屏幕，显示缩略图的首选方法是什么 html 我觉得你的小提琴不太好用。。。无

我正试图创建一个图像库使用砌体和图像重新排序时，浏览器的大小

但是，由于我对缩略图使用固定宽度150px（因此未加载实际的大图像文件），但我无法删除图像容器侧面的访问间距，因为它将根据屏幕大小进行缩放，因为宽度使用百分比

现场布局如下图所示：

请注意，图像容器右侧的间距过大。总之

如何使容器缩放到砌体图像栅格的大小，因为图像容器是基于宽度通过百分比计算的

将图像固定为150像素的宽度有意义吗？如果没有，对于不同大小的屏幕，显示缩略图的首选方法是什么

html

我觉得你的小提琴不太好用。。。无论如何，有一个选项

“isFitWidth”：true

提示砖石填充所有水平空间。试试看。

如果你创建了一个JSFIDLE，这样我们就可以使用它了，那么会更容易些，但是第一个猜测是尝试制作#gallery_容器显示：内联块，这样它就不会延伸到其父对象的整个宽度。嗨，比利，这里创建了JSFIDLE

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>App</title>
    <link rel="stylesheet" href="/static/css/style.css" />
    <link rel="stylesheet" href="/static/css/reset.css" />

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script src="/static/js/jquery-1.11.0.min.js"></script>
    <script src="/static/js/masonry.pkgd.min.js"></script>
    </head>
        <body>
        <div id="wrapper">
        <!-- the header and navigation -->
            <div id="header">
                <div id="navigation">
                    <ul>
                        <li><a href="#">Navigation1</a></li>
                        <li><a href="#">Navigation2</a></li>
                    </ul>
                </div>     
            </div>
            <!-- the content -->
            <div id="content">
        <!--- Image container -->
            <div id="gallery_container">
               <ul>
                 <li>
                    <img src="http://127.0.0.1:8001/media/images/d4RYJ4U_1.jpg" />
                </li>
                <li>
                    <img src="http://127.0.0.1:8001/media/images/hJLK7.jpg" />
                </li>
                <li>
                    <img src="http://127.0.0.1:8001/media/images/vx7IB5M.jpg" />
                </li>
                <li>
                    <img src="http://127.0.0.1:8001/media/images/9wMgVOw.png" />
                </li>
              </ul>
            </div>
        <!--Articles sidebar -->
            <div id="sidebar">
                <p>Sidebar</p>
            </div>           
        <!-- the footer -->
            <div id="footer">
                <p>Footer</p>
            </div>
        </div>
        <script>
        var columns;
            $(document).ready(function() {
                $('#gallery_container').masonry({
                    gutter: 12,
                    itemSelector: '#gallery_container ul li img',
                    columnWidth: 150         
                });
            });
        </script>
    </body>
</html>

#wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 96%; 
}
#header {
    margin-right: 1.0416667%; /* 10 div 960 */
    margin-left: 1.0416667%; /* 10 div 960 */
    width: 97.9166667%; /* 940 div 960 */
    background-color: #779307;
}
#navigation {
    padding-bottom: 25px;
    margin-top: 26px;
    margin-left: -1.0416667%; /* 10 div 960 */
    padding-right: 1.0416667%; /* 10 div 960 */
    padding-left: 1.0416667%; /* 10 div 960 */
    width: 97.9166667%; /* 940 div 960 */
}
#navigation ul li {
    display: inline;
    margin-right: 2.6595745%; /* 25 div 940 */
}    
#navigation ul li a {
    height: 42px;
    line-height: 42px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, "Lucida Grande", Verdana, sans-serif;
    font-size: 27px;
    color: black;
}
#content {
    margin-top: 58px;
    margin-right: 1.0416667%; /* 10 div 960 */
    float: right;
    background-color: #dedede;
    width: 72.7083333%; /* 698 div 960 */
}
#sidebar {
    border-right-color: #e8e8e8;
    border-right-style: solid;
    border-right-width: 2px;
    margin-top: 58px;
    padding-right: 1.0416667%; /* 10 div 960 */
    margin-right: 1.0416667%; /* 10 div 960 */
    float: left;
    width: 22.7083333%; /* 218 div 960 */
    background-color: #fe9c00;
}
#footer {
    float: left;
    margin-top: 20px;
    margin-right: 1.0416667%; /* 10 div 960 */
    margin-left: 1.0416667%; /* 10 div 960 */
    clear: both;
    width: 97.9166667%; /* 940 div 960 */
    background-color: #663300;
}
#gallery_container {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    background-color: #302200;
}
#gallery_container ul li {
    display: inline;
}
#gallery_container ul li img {
    padding-top: 10px;  
}