Question

我在将我的div放在我的页脚元素内的同一行时遇到问题。发生的事情是，一个div正在向下推，所以其他位置在它下面。这是我的HTML代码：

<footer>
      <div class="footercontact">
        email@email.com<br />
        phone number<br />
        Street name Number<br />
        Postnumber
        </div>

        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>         

    <div id="clockdiv">
        <div class="dayItem clockItem"></div>
        <div class="hourItem clockItem"></div>
    </div>
</footer>

CSS代码：

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px; 
}

.footercontact {
  text-align:left;
  width: 25%;
}

#clockdiv
{
    float: right;
}

所以基本上我想要我的第一个div，我的主要元素和第二个div在页脚中彼此相邻。我怎么做到这一点？谢谢！

Answer 1

footer {
  display: flex;
}

footer > div {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 2em;
  color: white;
}

<footer>
  <div style="background-color: red">Address</div>
  <div style="background-color: green">Links</div>
  <div style="background-color: blue">Clock</div>
</footer>

在页脚中将div放在一起。怎么样？

1 个答案: