一、兩個div水準頂部對齊
兩個div都設定display:inline-block; 并且右邊的div增加樣式vertical-align: top; 使得右邊的div跟左邊的div的頂部對齊。
二、兩個span水準頂部對齊
125網頁設計
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yNzQDM4kTMjlTMhlTY0YTO5EmNjhTMlFWOlZjYyQDZm9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
讓兩個span水準頂部對齊:
125網頁設計
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yNzQDM4kTMjlTMhlTY0YTO5EmNjhTMlFWOlZjYyQDZm9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
如果讓上面兩個span垂直居中對齊,可以把vertical-align的值設定為middle即可。
125網頁設計
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yNzQDM4kTMjlTMhlTY0YTO5EmNjhTMlFWOlZjYyQDZm9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
三、同一行div跟内容最多的div高度保持一樣高
div{float:left;}
内容多 内容少
解決方法:在所有div外面套個div,然後把overflow設定為hidden,并對内部div設定margin-bottom:-10000px;padding-bottom:10000px;
#main{overflow:hidden;zoom:1;}
#left,#right{ float:left;margin-bottom:-10000px;padding-bottom:10000px; border:1px solid #090; width:200px; }
1行内容
2行内容
3行内容
4行内容
5行内容
内容少
125jz網原創文章。釋出者:江山如畫,轉載請注明出處:http://www.125jz.com/2908.html