html - 像时尚一样在网格中组织图像

Question

我试图将此网页上的图像组织为两张并排的图像，并排在页面下方，两侧和顶部的间隙相等。格式应如下所示:(图片)(图片) 依此类推页面。我无法让带有描述的图像位于页面右侧，因为它们一直向下移动。我最初认为有一个 leftimg 和一个 rightimg 类会起作用，但我似乎也无法让它起作用。

<div class="maintext">
            <div class="leftimg">
                <img src="dinner1.jpg" width="400" height="300">
                <h3><span>Big American Burger</span></h3>
            </div>

            <div class="leftimg">
                <img src="dinner2.jpg" width="400" height="300">
                <h3><span>Tasty Carvery</span></h3>
            </div>
            <div class="leftimg">
                 <img src="dinner3.jpg" width="400" height="300">
                <h3><span>Sausage and Chips</span></h3>
            </div>
            <div class="leftimg">
                 <img src="dinner4.jpg" width="400" height="300">
                <h3><span>Delicious Deserts</span></h3>
            </div>
            <div class="leftimg">
                <img src="dinner5.jpg" width="400" height="300">
                <h3><span>Big American Burger</span></h3>
            </div>

            <div class="leftimg">
                <img src="dinner6.jpg" width="400" height="300">
                <h3><span>Tasty Carvery</span></h3>
            </div>
            <div class="leftimg">
                 <img src="dinner7.jpg" width="400" height="300">
                <h3><span>Sausage and Chips</span></h3>
            </div>
            <div class="leftimg">
                 <img src="dinner8.jpg" width="400" height="300">
                <h3><span>Delicious Deserts</span></h3>
            </div>
    </div>

还有CSS

.leftimg {
    position:relative; 
    width:400px;
    height:300px;
    margin-bottom:20px;
    left:10%;

}

h3 span{ 
    position: absolute; 
    top: 65%; 
    left: 0; 
    width: 100%; 
    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px;  
    text-align: center;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding-top: 3px;
    padding-bottom: 3px;
}   

Answer 1

考虑到屏幕尺寸可能更小，我不会使用 fixed。

但是尽管如此，您还是应该在图像上使用float: left 或display: inline-block。

并跳过 left: 10% 并使用 margin-left: 10% 代替

.leftimg {
    position:relative; 
    width:400px;
    height:300px;
    margin-bottom:20px;
    float: left;
    margin-left: 10%;
}

如果你想让这一切都集中在你的页面上，用下面的容器包裹它，并在图像上使用 display: inline-block:

.parent-container {
    width: 100%;
    position: relative;
    text-align: center;
}

.leftimg {
    position:relative; 
    width:400px;
    height:300px;
    margin-bottom:20px;
    display: inline-block;
}

也许我可以帮你解决这个问题!您需要添加 img {width: 100%} 以便让图像成为其父级的大小

更新 2:

我真的很难找出您真正需要的东西:)也许您可以提供更多信息(也许是屏幕截图)预期的结果应该是什么。

我添加了一个 clear: both 每两张图片 - 也许像这样？

.leftimg:nth-child(2n - 1) {
  clear: both;
}

而不是使用 float: left 现在是 float:right - 所以它在屏幕的右侧.. 此外它有点小 宽度:25%

JsFiddle