Question

我希望两个DIV（<div></div>）的顶行水平对齐，怎么做？

Answer 1

除了T. Stone建议浮动两个div之外，对齐两个div的一种简单方法是使两者都具有display: inline-block; CSS规则并将低位div赋予vertical-align: top; CSS规则。

看看这个简单的jsFiddle示例，看看它是如何工作的。

div {
    display: inline-block;
}
div#tall {
    height: 4em;
}
div#short {
    height: 2em;
    vertical-align: top;
}

Answer 2

为了回应“还有另一种方法吗”，确定你可以使用display: inline，但你有一堆黑客需要记住让它在IE6 / 7中运行。这种方式通常更好（但这一切都取决于个人情况）

<style type="text/css">
    .keeper {
        overflow: hidden; /* expand to contain floated children */
    }

    .keeper div {
       width: 200px;
       height: 30px;
       float: left;
       border-top: 1px solid red; /* so you can see the 'tops' */
    }
  </style>  
    <div class="keeper">
       <div>
       </div>
       <div>
       </div>

    </div>

Answer 3

将它们放在容器中。

.parent div { float: left; width: 50%; }

<div class="parent">
    <div>1</div>
    <div>2</div>
</div>

注意：子div的宽度总和不能超过父div的100％，包括margin和{ {1}}。

<强>替代

如果不需要保持页面的流程，并且真正重要的是对齐它们，那么div总是可以绝对定位。

padding

如何对齐两个DIV的顶线？

3 个答案: