Question

我试图在我的页面上水平对齐两个图像，然后水平对齐另外两个图像，这样我最终得到一个包含在div中的四个图像的网格。

我有div中包含的图像，我无法将它们与我希望它们对齐。

Answer 1

编辑：

父div需要宽度为100％。 img需要有50％的宽度。给你的img一个特定的高度，使它们都有相同的高度。添加box-sizing：border-box;这样你的填充将以宽度计算。最后添加float：left;放置图像。

我不建议使用diplay：flex，因为并非所有浏览器都支持它。

.parent {
  width:100%;
}
.parent img {
  width: 50%;
  box-sizing: border-box;
  float: left;
  padding: 5px;
}

https://jsfiddle.net/L8vx30v0/2/

Answer 2

好吧，如果你只有4张图片，你可以选择最简单的解决方案，其中有两个列表和.queryStartingAtValue(...)

https://jsfiddle.net/dgsgy1Ly/1/

Answer 3

有多种方法可以实现此目的。
定位是CSS的主要部分之一。

设置容器宽度，例如：.container { width: 600px; }
将儿童设置为分数的容器尺寸为.child { width: 250px; }
注意：如果.child是＆lt; div＆gt;记得设置.child＆＃39; s display: inline-block;
与上述相同，但动态单位。 %, vh, vw, em, rem
使用CSS3 Flexbox ：

.container {
  width: 600px;
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
}
.child {
  width: 250px;               /* fraction of container's size */
  margin: 2px;
}

使用布局框架的网格，例如： Bootstrap 。

<div class="container">
  <div class="row text-center">
    <img>
    <img>
  </div>
  <div class="row text-center">
    <img>
    <img>
  </div>
</div>

这里有4个例子的小提琴。 https://jsfiddle.net/warkentien2/otgns8hx/1/

并排放置图像

3 个答案: