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

你有语法错误 basicInfomration - ＆gt; basicInformation

Answer 2

您的div元素仍然是阻止的。将它们更改为 display：inline-block 另请注意，您的页脚标记未关闭。

   .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;
}

为什么有一个孩子推着另一个孩子推着它？

3 个答案: