浮動DIV頂部間距

我想對準黑色柱下的紅柱不改變HTML：浮動DIV頂部間距

是否對此有任何的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>

來源

2012-10-11 Frank

http://mattgemmell.com/2008/12/08/what-have-you-tried/ – lilalinux

@lilalinux，你可以指定[你有什麼嘗試？]（http://whathaveyoutried.com）它非常方便的域名。 – Jashwant

@frank，請添加相關代碼，因爲jsfiddle不是永久代碼持有者 – Jashwant

使用float屬性

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

，並設置

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

演示：對於第一個div fiddle

來源

2012-10-11 09:24:56 Selvamani

Thx爲回覆。我現在意識到我的榜樣太可怕了。我做了一個新的; http://jsfiddle.net/3HUNz/28/有沒有辦法將4 5 6動態對齊到列1 2和3的底部？ – Frank

好的，在這裏你添加位置：相對CSS屬性，http://jsfiddle.net/3HUNz/29/ – Selvamani

如你有固定的高度，您可以使用位置輕鬆地放置紅色的div的第一個div如下：絕對

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

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

來源

2012-10-11 09:25:58 Sowmya

您需要使用浮動的概念，讓他們在行：

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

來源

2012-10-11 09:27:00 defau1t

如果紙箱是住一樣，那麼你可以這樣做：

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

http://jsfiddle.net/X37eZ/

來源

2012-10-11 09:27:02 boz

浮動DIV頂部間距

回答

相關問題