我參考IKEA的選單
https://www.ikea.com/
我的 ul>li:last-child>div:first-child 無法放置在最下面,反而跑到了 ul>li:first-child>div:last-child 的上層我該怎麼調整呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
article, aside, blockquote, body, caption, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, li, main, menu, nav, ol, p, pre, section, table, td, textarea, th, ul {
margin: 0;
padding: 0;
}
ul{
position:relative;
list-style-type: none;
}
ul>li:first-child{
width: 33.33%;
float: left;
}
ul>li:last-child{
width: 33.33%;
float: right;
}
ul>li:first-child>div:last-child {
top: 0;
position: absolute;
left: 33.33%;
width: 33.33%;
}
ul>li:last-child>div:first-child {
bottom:0px;
position: absolute;
left: 33.33%;
width: 33.33%;
}
.locations__region>ul:after {
content: " ";
clear: both;
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
</div>
<div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
</div>
</li>
<li>
<div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
</div>
<div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
<div><a href="">台灣</a></div>
</div>
</li>
</ul>
</body>
</html>
給你一個建議,不要用 float 來做位置調整。
你都參考IKEA了。為何不也直接拿他們的CSS來用就好了。
用 float 來說調整位置並不是你想像的位置處理。而是排位處理。
當群組一多時就會跑位到不要不要的。
但是IKEA有用float排版 我也照他的方式下去做,就是ul>li:last-child>div:first-child地方不到位
你看到的是
media (min-width: 48rem)
.locations__region>ul>li:first-child {
float: left;
}
這類似的RWD做法吧。
它是當窄屏時,才去做float。由於窄屏配合單一float並不會有事。
畢竟不會碰上自動換行切分等問題存在。
它的float是有條件觸發的。並不像你這樣無任何限定條件下使用。
然後還會有多重float觸發處理。你會調位置調到死人的。
float我是建議忘記他的存在...
現在css有很多更好的選擇。