Html 以类似网格的方式组织图像_Html_Css_Image

Html 以类似网格的方式组织图像

html css image

Html 以类似网格的方式组织图像,html,css,image,Html,Css,Image,我试图将这个网页上的图像组织为两个图像，并排沿着页面向下，两侧和顶部的间隙相等。格式应如下所示：（图像）（图像）如此这般下去。我无法将带有描述的图像放在页面的右侧，因为它们一直向下移动。我原本以为有一个leftimg和一个rightimg类会有用，但我似乎也无法让它起作用 <div class="maintext"> <div class="leftimg"> <img src="dinner1.jpg"

我试图将这个网页上的图像组织为两个图像，并排沿着页面向下，两侧和顶部的间隙相等。格式应如下所示：（图像）（图像）如此这般下去。我无法将带有描述的图像放在页面的右侧，因为它们一直向下移动。我原本以为有一个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>

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

但无论如何，您应该在图像上使用

float:left

或

display:inline block

然后跳过

left:10%

，改为使用

左边距：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:two

每秒一张图片-可能是这样

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

现在，它不是使用

float:left

而是

float:right

，因此它位于屏幕的右侧。。此外，它的宽度有点小，为25%