首页 > 其他 > 详细

弹性布局

时间:2019-01-14 10:31:32      阅读:123      评论:0      收藏:0      [点我收藏+]
.test {
    font-size: 40px;
    color: yellow;
}
.box {
    padding: 0 30px;
}

.ul0 {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.li0 {
    /* width: 150px; */
    flex: 1;
    /* height: 200px; */
    /* background-color: silver; */
    border:1px dashed silver; s
margin: 6px;
}

.ul1 {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.li1 {
    box-sizing: border-box;
    flex: 1;
    height: 100px;

    background-color: green;
    margin: 4px 4px;

}
        <div class="box">
            <ul class="ul0">
                <li class="li0">
                    <ul class="ul1">
                        <li class="li1"></li>
                        <li class="li1"></li>
                    </ul>
                    <ul class="ul1">
                        <li class="li1"></li>
                        <li class="li1"></li>
                    </ul>
                </li>
                <li class="li0">
                    <ul class="ul1">
                        <li class="li1"></li>
                        <li class="li1"></li>
                    </ul>
                    <ul class="ul1">
                        <li class="li1"></li>
                        <li class="li1"></li>
                    </ul>
                </li>
                <li class="li0">
                    <ul class="ul1">
                        <li class="li1"></li>
                        <li class="li1"></li>
                    </ul>
                    <ul class="ul1">
                        <li class="li1"></li>
                        <li class="li1"></li>
                    </ul>
                </li>
                <!-- <li></li> -->
            </ul>

        </div>

 

npm install angular@1.5.0
npm install angular-route@1.5.0
npm install angular-ui-bootstrap@2.5.6
npm install bootstrap@3.3.7

 

 

 

弹性布局

原文:https://www.cnblogs.com/DZzzz/p/10265055.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!