Div宽度百分比误差 [英] Div width percentage error

问题描述

我有div宽度的问题。第一个div宽度是100％。现在进入这个div有两个div，一个是60％的宽度，浮动是剩下的，如果我设置另一个40％的宽度和浮动：左，那么它来自第一个div的下侧。但如果我设置宽度39.60％那么它在左侧。我的问题是如何设置整数的百分比，以便两个div并排？



我尝试过的事情：

I have a problem of div width. first div width is 100%. now into this div there are two div one is 60% width and float is left and if I set another div with 40% width and float: left then it comes on the lower side of the first div. but if I set the width 39.60% then it is on left side. my question is how can I set the percentage in whole number so that two div is remain side by side?

What I have tried:

<div style="float: left; width: 100%;height: 40%; border: solid 1px yellow;">
            <div style="float: left; width: 60%; height: 100%; border: solid 1px red;">
            </div>
            <div style="float: left; width: 39.60%; height: 100%; border: solid 1px red;">
            </div>
        </div>

推荐答案

这是由于默认的大小调整 [ ^ ]， content-box 。你指定的宽度不包括填充，边距和边框。你的两个盒子的两边都有1px的边框，所以它们的总宽度是100％+ 4px。



如果您将大小调整改为 border-box ，则宽度为包括填充和边框，所以你的盒子将适合一行。

This is due to the default box-sizing[^], which is content-box. The width you specify excludes the padding, margin and border. Your two boxes have 1px borders on either side, so their total width is 100% + 4px.

If you change the box-sizing to border-box, the width includes the padding and border, so your boxes will fit on one line.

*, :before, :after 
{
    box-sizing: border-box;
}

示例 [ ^ ]

这篇关于Div宽度百分比误差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！