3

我想在不更改 HTML 的情况下对齐黑色列下的红色列：

http://jsfiddle.net/3HUNZ/28/

是否有任何 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>
4

4 回答 4

1

使用浮动属性

.col2 {
float: right;
height: 200px;
}

并设置

.col3{border: 1px solid red;
float: left;
}

演示：小提琴

于 2012-10-11T09:24:56.150 回答
0

由于您为第一个 div 设置了固定高度，因此您可以使用 position:absolute 轻松地将红色 div 放置在第一个 div 下方

.col3{border: 1px solid red; position:absolute; top:100px}​

演示http://jsfiddle.net/3HUNZ/18/

于 2012-10-11T09:25:58.417 回答
0

您需要使用浮动概念使它们对齐：

http://jsfiddle.net/3HUNZ/16/

于 2012-10-11T09:27:00.977 回答
0

如果盒子保持不变，那么你可以这样做：

.col3 { margin-top: -90px; }​

http://jsfiddle.net/X37eZ/

于 2012-10-11T09:27:02.447 回答