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

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

但是您应该在图片上使用{'H', 'e', 'a', 'd', '\0'}或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;
}

才能让图片成为其父级的大小

更新2：

我很难找到你真正需要的东西:)也许你可以提供进一步的信息（可能是截图）预期结果应该是什么。

我每隔一张图片添加一个img {width: 100%} - 可能是这样吗？

clear: both

而不是现在使用.leftimg:nth-child(2n - 1) { clear: both; }它float: left - 所以它位于屏幕的右侧..此外它还有点小{{} 1}}

JsFiddle

像时尚一样以网格形式组织图像

1 个答案: