Question

请参阅http://jsfiddle.net/jr32V/，其中包含以下内容：

CSS：

body {
    font-size: 2em;
    color: white;
    background-color: grey;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.topmenu, .main {
    width: 500px;
    margin: 0 auto;
}

.topmenu {
    background-color: red;
}

.main {
    background-color: black;
}

.mainpicker {
    margin-right: 20px;
    float: left;
    background-color: green;
}

.maincontent {
    width: 600px; /*get rid of this line to see how it should look*/
    float: left;
    background-color: blue;
}

HTML：

<body>
    <div class="topmenu">
        A whole bunch of menu stuff
    </div>
    <div class="main">
        <div class="mainpicker">
            Picker
        </div>
        <div class="maincontent">
            Content on right of picker
        </div>
    </div>
</body>

我想要＆＃34; maincontent＆＃34; div恰好位于＆＃34; mainpicker＆＃34;的右边，就像你删除它上面的width属性一样。

请注意，width属性只是为了说明这一点，在实际使用中，宽度可能会超出容器的任何数量。

另请注意，我不希望父容器（＆＃34; main＆＃34;）完全展开，因为它必须从与＃34; topmenu＆＃34;相同的左侧位置开始。即它们都具有相对于居中/边缘自动计算的相同宽度

Answer 1

我认为这就是你要找的东西。为.main课程添加宽度和页边距，并从float:left;课程中删除.maincontent。我更新了您的 fiddle

.main {
    background-color: black;
    width:500px;
    margin:0 auto;
}

.mainpicker {
    margin-right: 20px;
    float: left;
    background-color: green;
    width:100px;
}

.maincontent {
    width: 600px;
    background-color: blue;
}

修改

如果你想要漂浮两个孩子，你必须留在你父类的给定宽度内。所以你的代码看起来像这样：

.topmenu { background-color: red; width:500px; margin:0 auto; } .main { width:500px; margin:0 auto; } .mainpicker { background-color: green; width:100px; float:left; } .maincontent { background-color: orange; width:400px; float:left; }

您可以观看 here

Answer 2

http://jsfiddle.net/jr32V/6/

我将box-sizing: border-box;和宽度作为百分比mainpicker和maincontent

.mainpicker {
    float: left;
    background-color: green;
    width: 20%;
    box-sizing: border-box;
}
.maincontent {
    float: left;
    background-color: blue;
    width: 80%;
    box-sizing: border-box;
}

这对你有帮助吗？

Answer 3

以下代码似乎可以解决这个问题，即使结果看起来并不令人满意。

.mainpicker {
    margin-right: 20px;
    float: left;
    background-color: green;
    display: inline-block;
    position: relative;
}

.maincontent {
    width: 600px;
    float: left;
    background-color: blue;
    display: inline-block;
    position: absolute;
    width: auto;
}

DEMO： http://jsfiddle.net/thauwa/jr32V/5/

动态尺寸的浮子扩展到容器之外

3 个答案: