對齊頂部

我想創建一個真正的基本佈局與兩個div。這個想法是在同一行中有一個div在左邊，另一個在右邊。但是他們沒有相同的高度。對齊頂部

爲什麼較小的div對齊而不是頂部？這不是頁面流中的預期行爲嗎？

<body> 
    <div> 
     <div class="left debug-green"></div> 
     <div class="right debug-red"></div> 
    </div> 
</body> 


body { 
    font-size: 0; 
} 
.left { 
    width: 50%; 
    height: 30px; 
    display: inline-block; 
} 
.right { 
    width: 50%; 
    height: 20px; 
    display: inline-block; 
} 
.debug-red { 
    background-color: rgb(255, 0, 0); 
} 
.debug-green { 
    background-color: rgb(0, 255, 0); 
}

這是一個js小提琴樣本：

http://jsfiddle.net/3nAsx/

來源

2014-06-05 andymaster01

大多數瀏覽器渲染默認vertical-alignment值inline-block元素和值是：baseline

vertical-align值：

vertical-align: baseline  /* keyword values */ 
    vertical-align: sub 
    vertical-align: super 
    vertical-align: text-top 
    vertical-align: text-bottom 
    vertical-align: middle 
    vertical-align: top 
    vertical-align: bottom 
    vertical-align: 10em   /* <length> values */ 
    vertical-align: 4px 
    vertical-align: 20%   /* <percentage> values */ 
    vertical-align: inherit

來源

2014-06-05 04:09:37 kyooriouskoala

添加到右側的div

vertical-align: top;

來源

2014-06-05 01:54:30

但是，div背後的原因是什麼？是在某個地方定義該值的css規範？ – andymaster01

您可以float:left;更換display:inline-block;聲明。既然你指定了尺寸，你不需要inline-block屬性。這是改變後的樣子。

enter image description here

代碼

.left { 
    width: 50%; 
    height: 30px; 
    float:left; 
} 
.right { 
    width: 50%; 
    height: 20px; 
    float:left; 

}

來源

2014-06-05 01:58:28

謝謝，但是div的底部對齊是什麼原因？ – andymaster01

好問題，不確定，但可能是默認值。 –

垂直對齊：頂部;

是不錯的選擇。

但是，如果你只想要一個div在左邊，其他的在右邊。

給浮動：左到左的div和浮動：右右格

來源

2014-06-05 01:58:45 Tushar

這種方式是好短編碼

<div class="wrap"> 
    <div class="left debug-green"></div> 
    <div class="right debug-red"></div> 
    </div> 

    .wrap div{ 
    width: 50%; 
    height: 30px; 
    display: inline-block; 
    background-color: green; 
    float:left; 
    vertical-align:top; 
    } 

.right { 
    height: 20px !important; 
    background-color:red !important; 
    }

來源

2014-06-05 03:32:33 Kisspa

回答

相關問題