Question

好的，所以我有一个3列浮动div。全部设置为float:left

左div具有固定宽度
中间div调整窗口大小
右侧div具有固定宽度

一切看起来都很好'直到我调整窗口大小并且右div下降到中间div以下

enter image description here

这里有一些代码片段

<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:600px;max-width: 65%">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="width:265px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

.divContent{    
    margin : 16px 10px 5px;
}

.divContainer {
    float: left;
    margin: 0px 20px 20px 0px;
    padding-bottom: 10px;   
    background-color:#FFFFFF;
    border: 1px solid #CCC;
    box-shadow:4px 4px 13px #bbbbbb;
    -moz-box-shadow:4px 4px 13px #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

编辑

管理得出这个但是中间div和右div之间存在差距，如果没有让div向右下去，我就无法填补它。我无法将中间值调整为高于63％并且非常奇怪......

body min-width = 1560px
<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:900px;width: 63%;">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:100px;max-width: 15%;float: right">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

enter image description here

Answer 1

我认为问题在于中间div的65％宽度是针对整个文档的，当文档调整大小时，中间div会被重新调整，以便它与右边的重叠，从而迫使它向下移动。

我认为这适用于中间div：＆lt; div class =“divContainer”style =“min-width：600px; max-width：90％ - 565px”＆gt;

我自己没有尝试过，但我认为应该可行，如果没有，只需尝试将百分比从90％降低到更小的值。

编辑：
如果您希望能够使窗口长度小于565px，您可以尝试设置：

BODY {min-width：600px; }

Answer 2

以像素为单位给出divContainer的最大宽度。

例如

max-width: 710px;

或者你也可以将最大宽度减少到53％。我试过它。

Answer 3

将1个div中的所有3列包裹起来并设置最小宽度，以便整个页面的大小不会小于此值。

Answer 4

设置中间div的最小宽度+百分比有点容易出错。

为中间人尝试这样的事情怎么样？

<div class="divContainer" style="float: none; margin-left: 300px; margin-right: 300px">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

你在这里做的基本上不是漂浮在中间div（这样它的边缘在另外两个边缘下滑动 - 然后在每边边缘。这样你应该获得最大的灵活性。如果右边仍然下降，您可能需要更改HTML的顺序，以便中间div位于正确的后面。

Answer 5

<强>解决!!! 我将第一个div向左移动，第二个向右移动，中间最后没有浮动只是基于左右div宽度+填充+边距的边距

enter image description here

<div class="divContainer" style="width:300px;float: left;">
    <div class="divContent">[LEFT DIV StUFF HERE]</div>
</div>

<div class="divContainer" style="width: 250px;float: right;">
    <div class="divContent">[RIGHT DIV STUFF HERE]</div>
</div>

<div class="divWidget" id="clientStatusDiv" style="margin:0px 270px 0 310px;">
    <div class="divContent">[CENTER STUFF HERE]</div>
</div>

YAY !!!大声笑它甚至适用于调整大小看起来不错!!

调整页面大小时浮动div会关闭

5 个答案: