搜尋

首頁  >  問答  >  主體

css - 如何实现四栏等宽自适应布局

面试的时候碰到的问题, 如何实现四栏等宽,中间设置一定间隙的自适应布局:

如图,在未知宽度的父容器中, 里面四列等宽,中间间隙相等,比如10px:(我目前只想到是用JS先获取父容器宽度,然后通过减去间隙,再计算设置列的宽度后设置列宽度),有没有不用JS的方法?

阿神阿神2770 天前494

全部回覆(3)我來回復

  • 迷茫

    迷茫2017-04-17 13:51:25

    雷雷

    回覆
    0
  • 阿神

    阿神2017-04-17 13:51:25

    你可以這樣試試:(假設外層容器的寬度為100%),
    .wrap p{

        background: blue;
        float:left;
        width:20%;
        height:100%;
        margin:0 2.5%;
    }

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 13:51:25

    bootstrap的柵格系統

    回覆
    0
  • 取消回覆