浮动而不覆盖填充物

Question

我通过使用span参数创建了一个具有3个不同float:left的网站，这些网站彼此相邻。但这会弄乱我在包装器上的padding包含的两个元素。 如何在不弄乱填充物的情况下让它们彼此相邻？

Example

＆＃13;

＆＃13;

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

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

.box-A {
  width: 49%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有两种解决方案可以解决这个问题。

1. 使用display:inline-block代替float:left和remove the spaces which is occured by inline-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*/ }

{{1}}

Answer 4

在你的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;
}