[英]Floating div top spacing
我想在不改變HTML的情況下將黑色列下的紅色列對齊:
這有什么jquery或css解決方案嗎?
CSS:
.col{
width: 25%;
border: 1px solid black;
margin: 10px;
padding:2px;
float:left;
}
.clear{clear:both;}
.col1{height: 200px;}
.col2{height: 300px;}
.col3{height: 200px;}
.col4{height: 200px; border: 1px solid red;}
.col5{height: 220px; border: 1px solid red;}
.col6{height: 120px; border: 1px solid red;}
HTML:
<div class="col col1">1</div>
<div class="col col2">2</div>
<div class="col col3">3</div>
<div class="clear"></div>
<div class="col col4">4</div>
<div class="col col5">5</div>
<div class="col col6">6</div>
使用float屬性
.col2 {
float: right;
height: 200px;
}
並設定
.col3{border: 1px solid red;
float: left;
}
演示: 小提琴
由於你有第一個div的固定高度,你可以使用position:absolute將紅色div放在第一個div的下方
.col3{border: 1px solid red; position:absolute; top:100px}
您需要使用浮動概念來使它們符合要求:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.