两个div一行。3个缝相等;同时，两个div不设高度等高显示。

发表于   |     |   阅读次数   |  

######
悟空第一次问我这个问题的时候，首相想到的是用弹性盒子模型。使用了justify-content：space-between/space-around。发现这两个属性不能实现这个效果。

#####

######
既然两个div是block块级元素，那么display：flex;还是可以使用的，（因为如果用inline-block，中间会有一条缝，根据不同浏览器渲染出不同效果）。由此，想到了栅格布局，其实就是利用百分比。 左边第一个div的margin-left是margin-right的两倍；右边第二个div的margin-right是margin-left的两倍；这个四个加起来再加上两个div的宽度，应该正好等于100%。

######
index.html:

<div class="container">
    <div class="child one" style="background:red">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint cupiditate, quo! Quibusdam quae aperiam quo aspernatur distinctio, atque deserunt, laboriosam iusto! Nihil omnis deserunt, molestiae, cupiditate aperiam ipsum iste ea?
    </div>
    <div class="child two" style="background:yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum iusto optio rerum facere voluptas natus asperiores officia maxime veniam quo? Qui ipsam aspernatur quam maiores natus dolorum ullam fugiat distinctio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fuga laboriosam alias aut eligendi nostrum, sint voluptatem nihil vitae vel dignissimos, dolorum doloremque. Ex odio, quis soluta at delectus tempore.
    </div>
</div>

css:

body {
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    /*align-items: center;*/
    /*justify-content: space-between;*/
    background-color: blue;
}

.child {
    width: 44%;
}

.one {
    margin-left: 4%;
    margin-right: 2%;
}

.two {
    margin-left: 2%;
    margin-right: 4%;
}

热评文章