使用display inline-block使列向下移动

Question

我正在尝试使用 display:inline-block 来构建三列布局。

一开始它效果不错，但当我给第一列添加内容时，会影响到其他布局，导致其他列显示在较低的位置。

我该怎么做才能避免这种情况发生？

.cont {
  width: 500px;
  height: 200px;
  background: #666666;
}
.col {
  display: inline-block;
  width: 30%;
  background: pink;
}

<div class="cont">
  <div class="col">
    test<br><br><br>
  </div>
  <div class="col">
    col2
  </div>
  <div class="col">
    col3
  </div>
</div>

- Petran

---

你的代码片段似乎没有展示出你的问题。 - j08691

在使用 inline-block 时需要记住的一件事是设置 margin-right: -4px。这可以解决任何与空白间距有关的问题。 - Adam Simpson

Answer 1

你应该添加vertical-align: top; CSS声明以使列在垂直方向上顶部对齐：

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

这里有一个在线演示。

---

老实说，我不喜欢使用inline-block在页面上创建列，因为它们之间会有空白间隔。

一段时间以来，float一直被使用，但现在flex盒子或CSS的grid可能是一个选项。

- Hashem Qolami

---

inline-block非常好，因为它保持在文档流中，减轻了清除浮动的需要。 - Adam Simpson

@AdamSimpson 欢迎提出任何建议，我所说的意见来自于超过12年的Web开发经验。 - Hashem Qolami

@aSeptik 我读了两遍 OP 的问题，他没有提到内容应该在中间，关键是因为列在文档正常流中呈现，它们会相互影响。 - Hashem Qolami

@HashemQolami 在2018年仍然有用 :) 太棒了 - Samrat Saha

Answer 2

你只需要在列上设置33%的宽度，这将限制它占用div整个宽度的33%。

http://jsfiddle.net/Ge6g7/1/

.cont {
    height:60px;
    background: #ffff88;
}
.cont span {
    display: inline-block;
    height:100%;
    line-height: 100%;
    width: 33%; /* Added Css */
}

- evasilchenko

---

@aSeptik - OP 没有提到将内容放在中间，除非我读错了什么。 - evasilchenko