Html 动态大小的浮动扩展到容器之外

请查看包含以下内容的文件：

CSS:

HTML:

一大堆菜单上的东西
采摘者
选择器右侧的内容

我希望“maincontent”div正好位于“mainpicker”的右侧，就像删除其上的width属性一样

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

还要注意，我不希望父容器（“main”）完全展开，因为它必须从与“topmenu”相同的左侧位置开始。i、 e.它们的宽度与定心/余量自动计算相同

我把

框大小：边框框和宽度占
mainpocker
和
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;
}

这对你有帮助吗？
我想这就是你要找的。将宽度和边距添加到
.main
类中，并删除
float:left来自
.maincontent
类。我更新了你的

.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;
}

您可以观看
下面的代码似乎起到了作用，尽管结果看起来并不令人满意

.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;
}

.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;
}

演示：
不幸的是，maincontent的内容是动态的，将超过500px。在CSS中给主要内容一个600px的硬宽度（加上“删除我”的注释，看看它是如何工作的），旨在证明我编辑了我的答案，看看：）我添加了一个演示。这就是你想要的吗？怎么。。。这样行吗？两个无浮球的双人跳水？你的
.main
类的宽度为500px。但是名为
.maincontent
的儿童类的宽度为600px。所以孩子比父母大。如果现在将其浮动，它将尝试浮动到另一个div旁边，但父div具有固定的宽度，因此它不能大于此宽度，这意味着它将跳转到名为
.mainpicker
的第一个div下。我又拉了一把小提琴给你看。也许你比我的解释更明白：）哦，等等，这不太管用。。。请参阅：应该完全保留在右侧。您是否注意到我的编辑和第二个JSFIDLE？您可以减小名为
.maincontent
的子div的宽度，也可以增大名为
.main
的父div的宽度。或者这个：或者这个：如果这是你的意思，问题是我不能减少.maincontent的宽度（它实际上是动态的-不是一个设置的宽度），我也不能增加.main的宽度，除非我只是不设置它的宽度。。。
.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;
}