按顺序左右浮动 4 个元素
我在订单中设置导航时遇到问题。我有 4 个 div 标签，它的顺序应该是左、右、右、左。所以我希望我的导航应该是这样的
我的浮动权有问题。我试过这个
.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">
© 2020 mysite.com
</div>
</footer>
</body>
</html>
不知何故，浮动并没有将我的无序列表保持在顶部。我已经通过 stackoverflow 进行了搜索。但我找不到任何答案。如果我得到这份工作将会更有帮助。
www说1回答
-
神不在的星期二
如果不改变div结构，只需使用display:gird.footer { display: grid; grid-template-columns: 1fr auto;}li { background-color: yellow; display: inline-block;}.one { grid-area: 1 / 1 / 3 / 2; background-color: orange;}.two { grid-area: 1 / 2 / 2 / 3;}.three { grid-area: 2 / 2 / 3 / 3;}.two, .three { background-color: aqua; text-align: right;}.copy { grid-area: 3 / 1 / 4 / 2; background-color: blue;}<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="copy"> © 2020 mysite.com </div> </footer> </body></html>
随时随地看视频慕课网APP
相关分类
Html5