如何對齊兩個DIV的頂部行？

Question

我想要兩個DIV的頂線（<div></div>）水平對齊，怎麼做？

Answer 1

在回答「有另一種方式做到這一點」，當然你可以使用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 2

將它們浮在容器中。

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

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

注：兒童的寬度的總和div s不能是父div，包括margin和padding的大於100％。

替代

如果保持與頁面流是不是必需的，和所有真正重要的是心，他們的div總是可以絕對定位。

.abs { position: absolute; top: 100px; width: 50px; } 
.left { left: 0px; } 
.right { left: 50px; } 

<div class="abs left">1</div> 
<div class="abs right">2</div> 

Answer 3

Steven，

除了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; 
}