顯示一行的兩個塊

我想顯示一行的兩個塊和這些不同高度的塊。顯示一行的兩個塊

現在我使用float: left並得到一個空間（黃色顯示截圖）：

screenshot 1

如何避免一個空間？

CSS：

.one{ 
    float: left; 
    border:1px solid #C11A1A; 
    width: 50px; 
}

HTML：

<div style="width: 110px;"> 
<div class="one" style="height:50px;"> 
     1 
    </div> 
    <div class="one">   
     2 
    </div> 
    <div class="one" style="height:70px;"> 
     3 
    </div> 
    <div class="one"> 
     4 
    </div> 
    <div class="one" style="height:50px;"> 
     5 
    </div> 
    <div class="one"> 
     6 
    </div> 
    <div class="one"> 
     7 
    </div> 
</div>

有兩個DIV，我得到這個變種：

screenshot 2

我想獲得相同的列高度（如儘可能），塊大小因文本而異。

來源

2012-01-24 lolalola

你爲什麼要使用div的表格數據？ –

你現在得到了你所說的：每行包含兩個塊。如果你想在兩個塊之間做兩個沒有空格的列，那麼爲列創建兩個'div'並用塊填充它們。 – AlexZam

這裏有一個適合所有玩家的jsfiddle：http://jsfiddle.net/F7saH/ –

您需要設置和float:left，並設置一個跨度的auto:width角落找尋你的「塊」

來源

2012-01-24 14:10:47 Sato

顯示一行的兩個塊

回答

相關問題