Css 调整页面大小时，浮动div下降

好的，我有一个3列的浮动div。全部设置

float:left

左div具有固定的宽度

中间div随窗口调整大小

右div具有固定的宽度

一切看起来都很好，直到我调整窗口的大小，右

div

下降到中间

div

下面是一些代码片段

<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的65%宽度适用于整个文档，当文档调整大小时，中间div将被重新压缩，以便与右侧dif重叠，迫使其向下移动

我认为这应该适用于中间部门：

我自己还没有试过，但我认为这应该行得通，如果不行，就试着把这个比例从90%降到更小的水平

编辑：
如果希望使窗口短于565px宽，可以尝试设置：

---

BODY{minwidth:600px；}

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

例如

---

或者你也可以将最大宽度减少到53%。我试过了。将所有3列都放在一个div中，然后设置最小宽度，这样整个页面的大小就不会小于这个值。

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

中间的那个试试这个怎么样

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

{中心DIV CONTENT HERE}

你在这里所做的基本上不是浮动中间div（这样它的边距就滑到了另外两个边的下面，然后两边都是边距。这样你就可以获得最大的灵活性。如果右边的边距仍然下降，你可能需要更改HTML的顺序，以便中间的div排在右边的后面。

解决了！！！ 我将第一个div浮动到左侧，第二个div浮动到右侧，最后一个中间的no浮动基于左右div宽度+填充+边距的边距

<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>

[左分区的东西在这里]
[右DIV的东西在这里]
[此处为中心内容]

---

耶！！！哈哈，即使调整大小看起来不错，它也能工作！！

这会使中间和右边的div相互下方，并且中间div在上分块上有空白，从%o.o开始？如果只是将中间和右边的div都放在第一个下方，请不要想这一点=（试着再减去一点，比如说600左右，甚至可能将90%更改为70%。不确定它是否有效，但如果你把值弄乱了一点，我不明白为什么它不起作用：）顺便说一句，如果中间部分的最小宽度是600，那么你应该加上另外两个部分的宽度，还有任何潜在的填充物等等，所以当我想到它的时候，我会设置BODY{min width:1200}如果这解决了你的问题，请把这篇文章作为答案我设法解决了这个问题，但是当屏幕的分辨率更大时，会出现一个缺口。在第一篇文章中检查修改后的代码这是可行的，但是中间的DIV没有填满屏幕的其余部分，所以更大分辨率的屏幕右侧会有一个空白

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

<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>