html - 为什么一个 child div 将另一个 child 推到它下面？

Question

我有一个问题。我有一个容器(父级)占用 100% 的 div 和两个子级(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

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