浮動沒有覆蓋填充

Question

我正在做一個網站，有3個不同的span，通過使用float:left參數彼此相鄰。但是，這弄亂了padding我在包裝中包含了這兩個元素。 如何讓它們彼此相鄰而不干擾填充？

Example

.wrapper { 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    background: red; 
 
} 
 

 
.box-A { 
 
    width: 49%; 
 
    float: left; 
 
} 
 

 
.box-A { 
 
    width: 49%; 
 
}

<h1>Not working but aligned</h1> 
 
<div class="wrapper"> 
 
    <div class="box-A"> 
 
    Lorem 
 
    </div> 
 
    <div class="box-A"> 
 
    Ipsum 
 
    <br> Ipsum 
 
    <br> Ipsum 
 
    <br> Ipsum 
 
    <br> 
 
    </div> 
 
</div> 
 

 
<h1>Working, but not aligned</h1> 
 
<div class="wrapper"> 
 
    <div class="box-B"> 
 
    Lorem 
 
    <br> Lorem 
 
    <Br> 
 
    </div> 
 
    <div class="box-B"> 
 
    Ipsum 
 
    <br> Ipsum 
 
    <br> 
 
    </div> 
 
</div>

Answer 1

有兩種解決方案，以修復該問題。

1. 使用display:inline-block代替float:left和remove the spaces which is occured byinline-block
2. 添加clearfix爲包裝

Answer 2

<h1>Not working but aligned</h1> 
<div class="wrapper"> 
    <div class="box-A"> 
    Lorem 
    </div> 
    <div class="box-A"> 
    Ipsum<br> 
    Ipsum<br> 
    Ipsum<br> 
    Ipsum<br> 
    </div> 
</div> 
<style> 
.wrapper { 
    width: 100%; 
    padding: 10px 0; 
    background: red; 
    display: inline-block; 
} 
.box-A { 
    width: 49%; 
    float: left; 
} 

.box-A { 
    width: 49%; 
} 
</style> 

Answer 3

上wrapper

.wrapper { 
    width: 100%; 
    padding: 10px 0; 
    background: red; 
    display: inline-block; 
    overflow: hidden;/*Add This Property*/ 
} 

Answer 4

製作添加overflow:hidden以下改變你的CSS，我希望這應該是工作。

.wrapper { 
    width: 100%; 
    padding: 10px 0; 
    background: red; 
} 
.box-A { 
    width: 49%; 
    float: left; 
} 

.box-A { 
    width: 49%; 
} 

.wrapper:after { 
    content:""; 
    clear:both; 
    display:block; 
}