我在訂單中設置導航時遇到問題。我有 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 進行了搜索。但我找不到任何答案。如果我得到這份工作將會更有幫助。
1 回答
神不在的星期二
TA貢獻1963條經驗 獲得超6個贊
如果不改變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>
- 1 回答
- 0 關注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消