为什么一个孩子 div 把另一个孩子推到它下面

Question

我有一个问题。我有一个容器(父级(占据了div 的 100% 和两个孩子 (45%(。子div (.basicInfomration( 通过占用其一些空间来推动下面的另一个子级 (.info(。而不是正确对齐，下面推了

<footer>
<div class="basicInfomration">
  <h3>Dublin Coffee House Opening Hours</h3></br>
  <span>Monday - Friday: 6:30am - 5pm</span></br>
  <span>Saturday - Sunday: 10am - 4pm</span></br>
  <span class="address">
    13 Dame Street </br>
    Dublin 2 - FX32131
  </span>
</div>
<div class="info">
  <img src="images/latte.jpg">
  <h5>Dublin Coffee House</h5>
  <p>We serve premier espresso drinks, (Mocha, Latte, traditional Cappuccino) crafted  by serious Baristas and freshly roasted specialty coffees. We strive to DELIGHT the customer with every visit!</p>
  <p>In addition to great coffee, we serve up a variety teas, chai, smoothies, steamers and lots of fresh baked goods made in house or from local bakeries. We offer free Wi-Fi. We hope you stop by to check out the great selection of treats and cozy atmosphere!</p>
</div>

.CSS

/*Footer*/
footer {
 width:100%;
 padding-left: 20px;
 padding-right: 20px;
 margin: auto; /* Centers content */
 overflow: auto;
 }
.basicInfomration,
.info {
width: 45%;
}
.basicInformation {
 float: left;
 }
.info{
float: right;
/*margin-top: -140px;*/
 }

Answer 1

你有语法错误基本信息 -> 基本信息

Answer 2

你的div 元素仍然是块。将它们更改为显示：内联块另请注意，您的页脚标签未关闭。

   .basicInfomration,
    .info {
    width: 45%;
    display: inline-block;
    }

Answer 3

我已经重写了 CSS 以使用 flex-box，它看起来已经纠正了这个问题，并为元素提供了一些响应能力。看看这个jsfiddle。

footer{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.info, .basic-information{
  justify-content:space-between;
  flex: 1 50%;
  padding: 0 20px;
}