[英]Floating div top spacing
I would like to align the red columns under the black columns without changing the HTML: 我想在不改变HTML的情况下将黑色列下的红色列对齐:
http://jsfiddle.net/3HUNz/28/ http://jsfiddle.net/3HUNz/28/
Are there any jquery or css solutions for this? 这有什么jquery或css解决方案吗?
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: 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>
As you have fixed height for first div, you can place the red div easily below the first div by using position:absolute 由于你有第一个div的固定高度,你可以使用position:absolute将红色div放在第一个div的下方
.col3{border: 1px solid red; position:absolute; top:100px}
Demo http://jsfiddle.net/3HUNz/18/ 演示http://jsfiddle.net/3HUNz/18/
You need to use the float concept to get them in line: 您需要使用浮动概念来使它们符合要求:
If the boxes are staying the same then you could do: 如果盒子保持不变那么你可以这样做:
.col3 { margin-top: -90px; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.