擦除2塊之間的垂直空白

我有兩個面板，panel1左側是浮動寬度，panel2是剩餘寬度。在面板2中，我有多個箱子，它們也有兩個小會話，會話1是左浮動的，另一個是剩餘寬度。我的問題是第一個盒子和第二個盒子之間的垂直空白區域，如片段所示。我發現面板的長度導致了這個問題。如何通過擦除第一個盒子和第二個盒子之間的空白來解決這個問題？擦除2塊之間的垂直空白

.prefix-clear:after { 
 
\t display: table; 
 
\t content: ""; 
 
\t clear: both; 
 
} 
 

 
.box-1 { 
 
    float: left; 
 
    width: 50px; 
 
    background: red; 
 
} 
 

 
.box-2 { 
 
    margin-left: 50px; 
 
    padding: 5px; 
 
    background: green; 
 
} 
 

 

 
.left { 
 
    float: left; 
 
    width: 50px; 
 
    background: red; 
 
} 
 

 

 
.box-2 { 
 
    margin-left: 50px; 
 
    background: yellow; 
 
}

<div class="prefix-clear"> 
 
<div class="box-1"> 
 
    <p>text</p> 
 
    <p>text</p> 
 
    <p>text</p> 
 
    <p>text</p> 
 
    <p>text</p> 
 
</div> 
 
<div class="box-2"> 
 
    
 
    <div class="box prefix-clear"> 
 
    <div class="left">box</div> 
 
    <div class="right">1</div> 
 
    </div> 
 
    <div class="box prefix-clear"> 
 
    <div class="left">box</div> 
 
    <div class="right">2</div> 
 
    </div> 
 
    <div class="box prefix-clear"> 
 
    <div class="left">box</div> 
 
    <div class="right">3</div> 
 
    </div> 
 
</div> 
 
    </div>

來源

2015-03-31 Jason

我不清楚你想要什麼樣的結果。 – j08691 2015-03-31 18:54:46

我希望框2的位置位於框1的正下方（如框3和框2）。對不清楚的請求感到抱歉。 – Jason 2015-03-31 18:56:29

喜歡這個http://jsfiddle.net/j08691/babLfd8x/？ – j08691 2015-03-31 18:59:10

如果你只是刪除空白，嘗試display: table-column;爲您prefix-clear:after聲明。除此之外，我們可能需要一個模型來看看你想要達到什麼。

來源

2015-03-31 20:56:01 joeyc

擦除2塊之間的垂直空白

回答

相關問題