【前端】如何实现四栏等宽自适应布局

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

如图，在未知宽度的父容器中， 里面四列等宽，中间间隙相等，比如10px：（我目前只想到是用JS先获取父容器宽度，然后通过减去间隙，再计算设置列的宽度后设置列宽度），有没有不用JS的方法？
【前端】如何实现四栏等宽自适应布局

回答

<meta charset="UTF-8">
<title>四列等框</title>
<style type="text/css">
    *{margin: 0;padding:0;}
    .wrap{
        display: flex;
        height: 400px;
    }
    .wrap div{
        background: blue;
        flex: 1;
    }
    .wrap div+div{
        margin-left: 10px;
    }
</style>
<div class="wrap">
        <div>DIV1</div>
        <div>DIV2</div>
        <div>DIV3</div>
        <div>DIV4</div>
    </div>

</body>

你可以这样试试：（假设外层容器的宽度为100%），
.wrap div{

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

bootstrap的栅格系统

以上是 【前端】如何实现四栏等宽自适应布局 的全部内容， 来源链接： utcz.com/a/81079.html

回到顶部