固定宽度标题和具有同位素/砖石的流体图像

Question

我有一个固定宽度的标题和页面上的大量图像。我希望它们与屏幕截图中显示的相同。

图像宽度可变，最高可达200​​px。我尝试过以下代码，但它不起作用。图像与标题重叠，图像之间有一个小空间。

＆＃13;

＆＃13;

$(function() {
        $('.grid').isotope({
            itemSelector: '.item',
            percentPosition: true,
            masonry: {
                columnWidth: ''
            }
        });
    });

＆＃13;

.container {
        width: 1024px;
        margin: 0 auto;
    }
    body {
        margin: 0;
    }
    .header {
        width: 300px;
        height: 40px;
        background-color: #0fa3c3;
        float: left;
    }
    .item {
        width: 20%;
        float: left;
    }

＆＃13;

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<div class="container">
        <div class="grid">
            <div class="header"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个..我给头部绝对位置也是..和z-index为2，现在试试。

$(function() {
        $('.grid').isotope({
            itemSelector: '.item',
            percentPosition: true,
            masonry: {
                columnWidth: ''
            }
        });
    });

.container {
        //width: 1024px;
        //margin: 0 auto;
    }
    body {
        margin: 0;
    }
    .header {
        width: 300px;
        height: 40px;
        background-color: #0fa3c3;
        float: left;
        position: absolute;
        z-index: 2;
    }
    .item {
        width: 20%;
        float: left;
    }

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<div class="container">
        <div class="grid">
            <div class="header"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
            <div class="item"><img src="http://lorempixel.com/200/300/"></div>
        </div>
    </div>