使用显示内联块列向下移动 [英] Using display inline-block columns move down

问题描述

我尝试使用 display：inline-block 建立3列。

开始，但是当我向第一列添加内容时，它会影响布局的其余部分，并将其余列置于较低级别。

我能做什么以避免这种情况？

  .cont {width：500px; height：200px; background：＃666666;}。col {display：inline-block;宽度：30％; background：pink;}  

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

方案

您应该添加 vertical-align ：top; CSS声明，用于在顶部垂直对齐列：

  .cont span {
 display：inline-block; 
 vertical-align：top; / *垂直对齐inline-block元素* / 
 height：100％; 
 line-height：100％; 
 width：33.33％; / *只是演示* / 
 outline：1px broken red; / *仅供演示* / 
} 
  

=http://jsfiddle.net/Ge6g7/5/>在线演示 。

---

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

我可以建议的最佳方法正在使用CSS float 属性。

I am trying to use display:inline-block to build 3 columns.

It works fine in the beginning, but when I add content to the first column it affects the rest of the layout and renders the rest of the columns at a lower level.

What can I do to avoid this?

.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>

解决方案

You should add vertical-align: top; CSS declaration to align the columns vertically at the top:

.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 */
}

Here is a online demo.

---

Honestly, I'm not a fan of using inline-block to create columns on the page, because of the white spaces between them.

The best approach I could suggest is using CSS float property.

这篇关于使用显示内联块列向下移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！