Question

看看以下JSBin：http://jsbin.com/iheNOvo/3/edit

以下是代码：

<html>
<head>
    <style type="text/css">
        #container {
            display: inline-block;
            width: 50%;
            height: 20%;
        }

        #elem1 {
            background-color: green;
            width: 50%;
            height: 100%;
            float: left;
            padding-right: 2%;
        }

        #elem2 {
            background-color: yellow;
            width: 50%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<div id="container">
    <div id="elem1"></div>
    <div id="elem2"></div>
</div>

问题是黄色div继续到下一行，因为我在第一个div中添加了一个填充。我希望容器能够包裹它内部的任何东西，但这似乎不起作用。关于如何实现我的需求的任何想法？

Answer 1

您可以在其中添加box-sizing:border-box，因此填充不会影响元素的宽度。

jsbin demo

#elem1 {
    box-sizing:border-box
}

添加此项，将导致divs在同一行上呈现，如您所愿。

如果要避免这种情况，请更改父元素或子元素本身的宽度。

#elem1 {
    width: 48%;
    padding-right: 2%;
}

jsbin demo

Answer 2

更新我的完整答案，主题入门者在两者之间留有余量：

http://jsfiddle.net/8XKAR/2/

#elem1 {
    background-color: green;
    width: 48%; /* 2% less */
    height: 100%;
    float: left;
    margin-right: 2%; /* you want margin instead of padding */
}

另一个解决方案是使#elem1和#elem2成为49％，这样他们都会给出1％，这样边际会集中在一起

最后一个选项是拳击模型，当我有一个简单的选择时，我不喜欢这个选项。这是我个人的看法，但根据我的经验，我只需要一次。

#elem1 {
    box-sizing:border-box;
    margin-right: 2%; /*padding instead of margin */

}

Answer 3

如果添加填充，则需要将div缩小为100％。

#elem1 {
    background-color: green;
    width: 48%;
    height: 100%;
    float: left;
    padding-right: 2%;
}

Answer 4

link：http://jsbin.com/iheNOvo/7/edit

#elem1 {
        width: 48%;
        padding-right: 2%;
}

当div内部有填充或边距时，内联块div溢出

4 个答案: