按顺序左右浮动4个元素

问题描述 投票：0回答：1

我在按顺序设置导航时遇到问题。我有4个div标签，应该按左，右，右，左的顺序排列。所以我希望我的导航看起来像这样expectation

我对浮动权利有疑问。我已经尝试过这个

.footer {

}

li {
  background-color: yellow;
  display: inline-block;
}

.one {
  background-color: orange;
}

.two {

}

.copy {
  background-color: blue;
}

.two, .three {
  float: right;
  background-color: aqua;
  clear: right;
}
<html>
  <body>
    <footer class="footer">
      <div class="one" >
        <img src="https://via.placeholder.com/250x100" alt="footer" />
      </div>
      <div class="two">
        <ul>
          <li>privacy</li>
          <li>terms and conditions</li>
          <li>contact us</li>
        </ul>
      </div>
      <div class="three">
        <ul>
          <li>instagram</li>
          <li>facebook</li>
          <li>twitter</li>
      </div>
      <div class="clear"></div>
      <div class="copy">
        &copy; 2020 mysite.com
      </div>
    </footer>
  </body>
</html>

以某种方式浮动未将我的无序列表保持在顶部。我已经搜索了stackoverflow。但我找不到任何答案。如果我完成这项工作，将会对您有所帮助。

html css css-float footer
1个回答
0
投票

尝试这种方式并更改合理的结构以使用display:flex

.footer {
    display: flex;
}

.main {
    flex: 1;
}

li {
    background-color: yellow;
    display: inline-block;
}

.one {
    background-color: orange;
}

.two {}

.copy {
    background-color: blue;
}

.two,
.three {
    float: right;
    background-color: aqua;
    clear: right;
}
<html>
    <body>
        <footer class="footer">
            <div class="main">
                <div class="one" >
                    <img src="https://via.placeholder.com/250x100" alt="footer" />
                </div>
                <div class="clear"></div>
                <div class="copy">
                    &copy; 2020 mysite.com
                </div>
            </div>
            <div>
                <div class="two">
                    <ul>
                        <li>privacy</li>
                        <li>terms and conditions</li>
                        <li>contact us</li>
                    </ul>
                </div>
                <div class="three">
                    <ul>
                    <li>instagram</li>
                    <li>facebook</li>
                    <li>twitter</li>
                </div>
            </div>
        </footer>
    </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.