熱情輕鬆地過生活: 不同寬高的DIV元素排成一線對齊

2013年10月7日星期一

不同寬高的DIV元素排成一線對齊

在Html中，有時候我們會想要讓各種寬高不等的DIV元素排成一線並且對齊(上或下)該怎麼辦呢？答案是使用css來控制display和vertical-align這兩個屬性，程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.content {
border: 1px solid #375;
display: inline-block; // 讓每個元素以block為單位顯示在同一列上
vertical-align: bottom; // 向下對齊, 向上對齊則改為top
}
</style>
</head>
<body>
<div style="width: 680px;">
<div style="width:120px;height:200px" class="content">內容1</div>
<div style="width:300px;height:100px" class="content">內容2</div>
<div style="width:180px;height:150px" class="content">內容3</div>
</div>
</body>
</html>

如此一來便可達成目的了，結果如下圖:

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)