Question

我有一个容器div，它以页面宽度的50％为中心。这有10px填充和位置相对。然后我在其中有一个div设置为宽度80％，向左浮动并且是不同的颜色，并且还具有10px的填充。还有另一个div设置为向右浮动，宽度为20％。两个嵌套的div都没有边框或边距。然而，正确的一个显示在另一个仅下方，直到特定的屏幕尺寸。

我的html / css如下：

<html>
    <head>
        CSS file included here
    </head>
    <body>
        <div class="page-container">
            <div class="right-col"></div>
            <div class="left-col"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>


.page-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.left-col {
    width: 80%;
    float: left;
}

.right-col {
    width: 20%;
    float: right;
}

.clear {
    clear: both;
}

这已经困扰了我多年，所以我很感激任何人都可以给我的帮助。提前谢谢。

此致

理查德

Answer 1

您的示例不包含任何填充，并且在任何屏幕尺寸下看起来都相同。如果向左侧div添加填充，则将其添加到总宽度，使其宽度为80％+ 20px。如果左边div中的内容需要一些填充，则在其中添加另一个div，其边距为10px。

   <div class="page-container">
        <div class="right-col"></div>
        <div class="left-col">
            <div class="left-col-inner"></div>
        </div>
        <div class="clear"></div>
    </div>

CSS

.left-col-inner{
margin:10px;
}

Answer 2

尝试指定接近100％的宽度，例如19.99％或79.99％。

Answer 3

迈克尔有它。

如果你想避免在div.left-col中插入另一个div，你可以给它所有的直接子节点或填充。

div.left-col > * {
    margin-left: 10px;
    margin-right: 10px;
}

彼此相邻的两个div加起来有100％的宽度 - 一个看起来低于另一个？

3 个答案: