css - CSS 3 div 浮动与液体中心 div

Question

这是一个非常简单的问题，但我不知道出了什么问题。

我有三个 div，2 个设置像素大小，另一个（中间）填充两者之间的剩余空间。

|------|--------------------------|------|
|      |                          |      |
|      |                          |      |
|      |                          |      |
|------|--------------------------|------|
       <-------------------------->
                 Width Fill

我有以下CSS：

左分区

#leftdiv {
    height: 50px
    width: 50px;
    float: left;
    }

中区

#middlediv {
    min-width: 270px;
    width: calc(100% - 100px);
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: -o-calc(100% - 100px);
    float: left;
}

右分区

#rightdiv {
    width: 100px;
    height: 50px;
    float: right;
}

我在这里简化了它，但基本上正确的 div 实际上并没有浮动，它像这样在下面：

|------|--------------------------|
|      |                          |
|      |                          |     
|      |                          |      
|------|--------------------------|
                                |------|
                                |      |
                                |      |
                                |      |
                                |------|

Answer 1

clear:both使元素下降到文档中它之前的任何浮动元素之下。

所以尝试使用clear: bothin #rightdiv。

有关更多信息，请查看此SO Answer。

Answer 2

#middlediv {
    min-width: 270px;
    width: calc(100% - 150px);
    width: -moz-calc(100% - 150px);
    width: -webkit-calc(100% - 150px);
    width: -o-calc(100% - 150px);
    float: left;
}

你的div的宽度之和超过了屏幕的宽度，所以右边的div被下推了

Answer 3

当您的#rightDiv 需要宽度为 50 像素时，它的宽度为 100 像素

#rightdiv {
    width: 50px;
    height: 50px;
    float: right;
}

否则，左右 div 的组合宽度为 150px，您只减去 100px

width: calc(100% - 100px); //100px is too small