简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html - 急求，能否用flex或者高端点的CSS来布局这个图呢？不想用浮动或定位了
大家讲道理
大家讲道理 2017-04-17 14:41:40
0
6
549

就是一个正方形里面，有五个大小相同的小圆圈，一个大圆圈，这样排版。自己用flex写了好久也没写出来，但是不想用浮动或者定位，有木有什么高端一点的CSS高端写法呢

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

全部回覆(6)
Peter_Zhu
Peter_Zhu2017-04-17 14:43:40 6樓 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{width: 600px; padding:5px; border: 1px solid #666;}
        .flex{
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -moz-flex;
            display: flex;
            justify-content: space-around;
        }
        .circle{
            border-radius: 50%;
            border: 1px solid #000;
            margin: 20px;
        }

        .box1-item1{
            width: 300px;
            height: 300px;
        }
        .box1-item2{
            flex-direction: column;
        }
        .box1-item2-one{
            width: 150px;
            height: 150px;
            margin: 6px 0 0 0;
        }
        .box2-item{
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <p id="wrap">
        <p class="box1 flex">
            <p class="box1-item1 circle"></p>
            <p class="box1-item2 flex">
                <p class="box1-item2-one circle"></p>
                <p class="box1-item2-one circle"></p>
            </p>
        </p>
        <p class="box2 flex">
            <p class="box2-item circle"></p>
            <p class="box2-item circle"></p>
            <p class="box2-item circle"></p>
        </p>
    </p>
</body>
</html>

差不多是這個樣子

點贊 +0
新增回覆
巴扎黑
巴扎黑2017-04-17 14:43:40 5樓

這種版面用flex很簡單的吧…

https://jsfiddle.net/oyx4gh7c/

點贊 +0
新增回覆
Ty80
Ty802017-04-17 14:43:40 4樓

算了，先用float頂上吧，之後有更改好的再改吧

點贊 +0
新增回覆
迷茫
迷茫2017-04-17 14:43:40 3樓

不用浮動也可以，就用p來拼！

點贊 +0
新增回覆
迷茫
迷茫2017-04-17 14:43:40 2樓

Grid佈局

點贊 +0
新增回覆
PHPzhong
PHPzhong2017-04-17 14:43:40 1樓

如果你是練習或學習的話用flex佈局沒問題，但是如果是專案的話建議你還是float佈局，因為Flex的兼容性真的好差，

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！