1

看看下面的 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 中添加了填充。我希望容器能够包裹里面的任何东西，但这似乎不起作用。关于如何实现我需要的任何想法？

4

4 回答 4

1

有一个小技巧可以添加box-sizing:border-box，因此填充不会影响元素的宽度。

jsbin 演示

#elem1 {
    box-sizing:border-box
}

添加这个，将导致两者divs在同一行上呈现，如你所愿。

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

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

jsbin 演示

于 2013-09-28T18:00:18.917 回答
0

链接：http: //jsbin.com/iheNOvo/7/edit

#elem1 {
        width: 48%;
        padding-right: 2%;
}
于 2013-09-28T18:02:15.517 回答
0

更新我的完整答案，主题启动器两者之间有什么差距：

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 */
}

另一种解决方案是49% #elem1，#elem2所以他们都给 1%，这样边际就会居中

最后一个选项是拳击模型，当有一个简单的替代方案时，我不喜欢这个选项。这是我个人的意见，但根据我的经验，我只需要一次。

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

}
于 2013-09-28T17:56:17.987 回答
0

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

#elem1 {
    background-color: green;
    width: 48%;
    height: 100%;
    float: left;
    padding-right: 2%;
}
于 2013-09-28T17:56:35.057 回答