Question

我有一个DIV。在里面我有两个漂浮的DIV。一个漂浮在左边，一个漂浮在右边。

向左漂浮的那个具有钙的宽度（100％-284px）。向右漂浮的那个宽度为284px。它们都在DIV中，这是一个宽度为70％的中心弹出窗口。

   -----------------------
   |   Main Div 70%      |
15%|---------- ----------|15%
   || float  | |  float ||
   || left   | |  right ||
   |---------- ----------|
   -----------------------

当我调整窗口大小时，70％会缩小，这很好。为了防止左浮动被压扁，它的最小宽度为284px。

我继续缩小我的屏幕，右边的浮子落在左边的浮子下面。现在看起来很糟糕，因为我有一列和两行（一个稍微左一个，一个略微右）稍微离开的那个旁边有一个284px的大间隙。

--------------------
| -----------      |
| | left    |  284 |
| | float   |  gap |
| -----------      |
|  ?     ----------|
|  gap   |  right ||
|        |        ||
|        ----------|
--------------------

理想情况下，我希望我的左浮动将大小从计算（100％-284）更改为100％。正确的浮动现在在它下面。

--------------------
|------------------|
| left      |
|------------------|
|   -----------    |
|   |  right  |    |
|   -----------    |
--------------------

请有人告诉我代码怎么做，我想它很容易但我看不到它。

#Left{
        display: block;
        float: left;
        text-align: center;
        color: #FFFFFF;
        overflow-y: auto;
        overflow-x: hidden;
        float: left;
        width: -webkit-calc(100% - 284px); 
        width: -moz-calc(100% - 284px);
        width: calc(100% - 284px);
        min-width: 284px;
        height: auto;
        margin-left: 6px;
        margin-top: 0px;
        margin-bottom: 6px;
    }

    #Right{
        float: right;
        width: 250px;
        height: auto;
        margin-right: 6px;
        margin-top: 0px;
        margin-bottom: 6px;
            }

     #Popup {
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        border-radius: 3px 3px 3px 3px;
        color: #333333;
        display: none;
        font-size: 14px;
        margin-left: 15%;
        margin-right: 15%;
        position: fixed;
        top: 15%;
        bottom: 15%;
        width: 70%;
        z-index: 222;
        text-align: center;
}

谢谢Chris

Answer 1

我不确定你制作的是什么样的布局，但是，您可以使用css媒体查询。正确的div在达到250px时会下降;

http://jsfiddle.net/3VPYd/

@media all and (max-width: 732px) {
     #left {
        background: green;
        float: none;
        width: 100%;
    }
    #right {
        background: pink;
        float: none;
        margin: auto;
        width: 50%;
    }
}

浮动Divs移动后调整大小

1 个答案: