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

问题描述

问 题

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

如图，在未知宽度的父容器中， 里面四列等宽，中间间隙相等，比如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>

这篇关于css - 如何实现四栏等宽自适应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！