iT邦幫忙

0

CSS排版問題

css
  • 分享至 

  • xImage

我參考IKEA的選單https://ithelp.ithome.com.tw/upload/images/20190731/20117940X3hMxfDnUb.jpg
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>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2

給你一個建議,不要用 float 來做位置調整。
你都參考IKEA了。為何不也直接拿他們的CSS來用就好了。

用 float 來說調整位置並不是你想像的位置處理。而是排位處理。
當群組一多時就會跑位到不要不要的。

豬豬人 iT邦新手 4 級 ‧ 2019-07-31 16:10:04 檢舉

但是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觸發處理。你會調位置調到死人的。

froce iT邦大師 1 級 ‧ 2019-07-31 17:14:15 檢舉

float我是建議忘記他的存在...
現在css有很多更好的選擇。

我要發表回答

立即登入回答