頁面兩邊的DIV元素之間有空格

我想創建兩列div元素，一列浮動在左側，另一列在右側。我期望所有剩下的人能夠堆疊在一起，對於正確的人也是一樣。但是，我看到右欄中的div之間的空格似乎來自左側的高度。我怎樣才能擺脫這兩者之間的空間？例子是http://jsfiddle.net/acugV/頁面兩邊的DIV元素之間有空格

<style type="text/css"> 
div { 
    width: 50px; 
    outline: 1px dashed #666 
} 
.left { 
    float: left; 
    clear: left; 
    background: yellow 
} 
.right { 
    float: right; 
    clear: right; 
    background: #0f0 
} 
</style> 
<div class="left" style="height:75px"></div> 
<div class="right" style="height:50px"></div> 
<div class="left" style="height:50px"></div> 
<div class="right" style="height:50px"></div>

來源

2013-08-21 Wayne Christopher

最簡單方法是圍繞漂浮的div創建的，而不是浮在它自己的每個容器的容器。

<div class="left"> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
</div> 
<div class="right"> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
</div>

http://jsfiddle.net/acugV/5/

來源

2013-08-21 22:04:06 Dragony

究其原因，我認爲這不會對我的工作是在每邊的div都會有不同的寬度。也就是說，我試圖在文字的兩邊留出邊緣不齊的邊緣。有些div的寬度爲0，可以充當「間隔符」。如果我把它們全部放入一個大格子裏，那麼我將失去粗糙。 –

仍然可以在使用包裝div的同時定義寬度屬性。外部div必須和最大的div一樣大。我更新了jsfiddle：http://jsfiddle.net/acugV/6/ – Dragony

但是，當您添加正文文本時，它會填充外部div所留下的區域。 http://jsfiddle.net/acugV/7 ...我想要文本遵循破爛的邊緣，有點像這樣：http://jsfiddle.net/acugV/8（除了這看起來怪異的部分） –

頁面兩邊的DIV元素之間有空格

回答

相關問題