HTML / CSS - 如何对齐box / div

Question

我希望你能帮助我，这对我来说有点问题。我有4个div，每个包含一个图像和一个小文本。我想对齐它们，看起来像这样

提前致谢

Answer 1

你需要更具体一点，即你当前的html和css是什么以及示例链接。

一个简单的解决方案是只浮动所有4个div，给它们固定宽度和高度，清除第三个div上的左浮动，以便最后两个div下降到第二行。

如果你只在div上设置50％的宽度，你甚至不必清除第三个div，但这取决于你是否使用固定宽度和高度，即响应网站shunn固定宽度。

Answer 2

将它们放入包装中，这是 FIDDLE

<div class="wrapper">
  <div class="box"><img src="/" alt="Image"><span>Text 1</span></div>
  <div class="box"><img src="/" alt="Image"><span>Text 2</span></div>
  <div class="box"><img src="/" alt="Image"><span>Text 3</span></div>
  <div class="box"><img src="/" alt="Image"><span>Text 4</span></div>
</div>

---

.wrapper {
  width: 220px;
}
.box {
  background: #000;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.box img {
  width: 100%;
}
.box span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #fff;
}

Answer 3

试试这个：

<ul>
    <li>first box</li>
    <li>second box</li>
    <li>third box</li>
    <li>fouth box</li>
<ul>

的CSS：

ul {
    list-style: none;
    widht: 220px;
    height: 220px;
    padding: 20px;
}

ul li {
    display: inline-block;
    float: left;
    width: 50px;
    height: 50px;
    padding-bottom: 20px;
}

ul li:nth-of-type(2n) {
   float: right;
}

Answer 4

你真的不清楚。

在造型设置'float：left'和'width：50％;'中为每个div。