Question

我有一个主div，里面有三个div。它们都被赋予了30％的宽度，并且它们都位于主div内。

我用display：inline-block;所以三个div看起来彼此相邻，但是当我给它们任意高度时，最左边的两个下降一点，而右边的一个保持原样。 div中的所有内容都只是简单的输入，没有什么可以动态增加div的大小。

我该如何解决这个问题？

Answer 1

在没有任何实时代码的情况下解决这个问题是非常困难的。对于主DIV中的DIV，指定类vertical-align:top

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

如果你对这些没有运气，我建议你把你的html和css放在jsfiddle上。

Answer 2

这是一个有效的解决方案。 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>

Answer 3

是。三个内部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>

display：inline-block; div表现不正常

3 个答案: