在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 父元素寬度不定，多個(gè)子元素如何平均分布？

父元素寬度不定，多個(gè)子元素如何平均分布？

類似效果：圖片描述

問(wèn)題：父元素寬度自適應(yīng)瀏覽器窗口寬度，那么其中的子元素如何水平均勻分布呢（包含左右外邊距）？

需要兼容ie8不考慮flex等css3布局。

回答
編輯回答
莓森

1.首尾外邊距 2% 中間外邊距1% 占據(jù)7%父元素的寬度 在拼接html時(shí)動(dòng)態(tài)添加進(jìn)去
2.每個(gè)元素本身占據(jù) 93%/元素個(gè)數(shù) <li style="width:'+(93/itemsLength).toFixed(6)+'+'%';float:left;display:inline-block"><li>

2018年8月25日 14:11
編輯回答
替身

flex布局了解一下

父容器display:flex;然后調(diào)試justify-content，選擇你想要的效果。

2017年1月13日 10:53
編輯回答
巫婆

flex布局

2017年6月22日 19:34
編輯回答
單眼皮

父元素寬度百分比，里面框框inline-block且寬度百分比，然后給框框加外邊距百分比。另外框框外邊距設(shè)為百分比這個(gè)百分比是根據(jù)父元素寬度來(lái)定的，所以所有框框?qū)挾?%)加上所有框框所有外邊距(%)=父元素寬度(即100%)即可。

補(bǔ)充：用inline-block元素與元素間會(huì)多出間隙導(dǎo)致間距偏大，這個(gè)問(wèn)題你搜搜怎么解決，詳細(xì)的就不在這展開(kāi)了。

2017年2月27日 01:51
編輯回答
陌如玉
<style>
 .bg {
           padding: 15px  30px;
           background-color: #e1e1e1;
        }
       
        .ul-wrapper {
            padding-left: 0;
            margin-right: -15px;
        }
        .ul-wrapper::after {
            display: block;
            content: '';
            clear: both;
        }
         .li-item {
             float: left;
             width:25% ;
             box-sizing: border-box;
             border-right: 15px solid transparent; // 15px 和 .ul-wrapper的 margin-right：-15px 對(duì)應(yīng)
             list-style-type:none;
         }
         .color {
             height: 150px;
             background-color: #08c;
         }
</style>
<html>
 <!-- margin 等分布局 -->
    <div class="bg">
        <p >管理中心</p>
        <ul class="ul-wrapper">
            <li class="li-item">
               <div class="color"></div>
            </li>
            <li class="li-item">
                <div class="color"></div>
            </li>
            <li class="li-item">
                <div class="color"></div>
            </li>
            <li class="li-item">
                <div class="color"></div>
            </li>
        </ul>

    </div>

</html>

最近在看張?chǎng)涡竦摹禼ss世界》 參考了他的方法

2018年3月20日 10:19