显示：内联块； div 行为异常答案

【问题标题】：display: inline-block; divs behaving erratically显示：内联块； div 行为异常
【发布时间】：2011-02-15 06:05:15
【问题描述】：

我有一个主 div，里面有三个 div。它们都被赋予了 30% 的宽度，并且它们都在主 div 中居中。

我使用了 display: inline-block;这样三个 div 就会彼此相邻出现，但是当我给它们一个高度时，最左边的两个会下降一点，而右边的会留在应该的位置。 div 中的所有内容都只是简单的输入，没有任何东西可以动态增加 div 的大小。

我应该如何解决这个问题？

【问题讨论】：

能否也提供html/css？
如果你能在这里给我们看一个例子就好了。或者至少是涉及的代码。

标签： css html

【解决方案1】：

在没有任何实时代码的情况下很难解决这个问题，但试试看吧。对于主 DIV 中的 DIV，分配类 vertical-align:top

另一个选项（或以及）是将line-height 设置为所需的高度，而不是height。

如果你对这些不满意，我建议你把你的 html 和 css 放在jsfiddle。

【讨论】：

【解决方案2】：

是的。三个内部 div 必须向左浮动，以便它们完全对齐。如果不浮动，它们可能会在不同的浏览器中产生问题。

CSS 代码

#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}

HTML 代码

<div id="wrapper">
   <div class="inner"></div>
   <div class="inner"></div>
   <div class="inner" style=" margin:0;"></div>
</div>

【讨论】：

浮动这些 div 不是“必须”的，这当然也可以使用 display:inline-block; 完成，请记住使用 vertical-align 垂直定位它们并跟踪白色-space - 实际上使用浮点数往往会给较新的前端带来问题
我遇到了同样的问题。这个答案Float: left; 确实让它们对我来说是一致的，所以“它起作用了”。但我投票给了vertical-align: top，因为它也有效，并且它更好地传达了我想要实现的目标，而不是左浮动的副作用（这对我来说似乎很神奇）。

【解决方案3】：

这是一个可行的解决方案。 http://jsfiddle.net/j3zjg/

<style>
#container{
    width:500px;
    height:300px;
    border:1px solid red;
}

#container div{
    width:30%;
    float:left;
    height:40px;
    background:red;
    margin-right:5px;
}
</style>

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>

【讨论】：