Question

这是一个非常简单的问题，但我无法弄清楚出了什么问题。

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

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

我有以下CSS：

Left Div

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

Middle Div

#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: both中的#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需要宽度为50px时宽度为100px

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

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

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

CSS 3 Div Floats with Liquid center div

3 个答案: