天天看點

html span向上對齊,div/span水準頂部對齊,同一行div跟内容最多的div高度保持一樣高...

一、兩個div水準頂部對齊

兩個div都設定display:inline-block;  并且右邊的div增加樣式vertical-align: top; 使得右邊的div跟左邊的div的頂部對齊。

二、兩個span水準頂部對齊

125網頁設計

html span向上對齊,div/span水準頂部對齊,同一行div跟内容最多的div高度保持一樣高...
html span向上對齊,div/span水準頂部對齊,同一行div跟内容最多的div高度保持一樣高...

讓兩個span水準頂部對齊:

125網頁設計

html span向上對齊,div/span水準頂部對齊,同一行div跟内容最多的div高度保持一樣高...
html span向上對齊,div/span水準頂部對齊,同一行div跟内容最多的div高度保持一樣高...

如果讓上面兩個span垂直居中對齊,可以把vertical-align的值設定為middle即可。

125網頁設計

html span向上對齊,div/span水準頂部對齊,同一行div跟内容最多的div高度保持一樣高...
html span向上對齊,div/span水準頂部對齊,同一行div跟内容最多的div高度保持一樣高...

三、同一行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