为什么一个孩子 div 将另一个孩子推到它下面？答案

【问题标题】：Why is one child div pushing pushing another child down below it?为什么一个孩子 div 将另一个孩子推到它下面？
【发布时间】：2017-10-19 15:57:35
【问题描述】：

我有一个问题。我有一个容器（父级）占用 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;*/
 }

【问题讨论】：

你有太多的填充。试试 padding-left: 10px; padding-right: 10px;甚至更少。
js/html/css请使用内嵌工具
你有一个拼写错误（CSS 中的 basicInformation 和 HTML 中的 basicInformation）..

标签： html css layout css-float

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的 div 元素仍然是块状的。将它们更改为 display: inline-block 另请注意您的页脚标签未关闭。

   .basicInfomration,
    .info {

    width: 45%;

    display: inline-block;

    }

【讨论】：

还要检查你的换行符。它必须是
而不是

【解决方案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;
}

【讨论】：