移动后重新调整浮动Divs的大小

烟熏

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

左浮动的宽度为calc(100%-284px)。向右浮动的宽度为284px。它们都位于DIV中,该DIV是宽度为70%的中心弹出窗口。

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

当我调整窗口大小时,会缩小70%,这很好。为防止左侧浮子受到挤压,它的最小宽度为284px。

我继续缩小屏幕,右浮子降到左浮子之下。现在看起来糟透了,因为我只有一列两行(一左一左,一右右),而一左一左旁边有284px的大间隙。

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

理想情况下,我希望我的左浮点将大小从calc(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;
}

谢谢克里斯

超级驱动器

我不确定您制作的是哪种布局,但是,您可以使用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%;
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整大小后div移动

来自分类Dev

Bootstrap 3:调整大小后列会向右浮动

来自分类Dev

激活/停用移动菜单并调整大小后,桌面菜单消失

来自分类Dev

激活/停用移动菜单并调整大小后,桌面菜单消失

来自分类Dev

表格叠加层显示移动和调整大小后的表格

来自分类Dev

重新启动程序后,CDockablePane不会调整大小

来自分类Dev

重新打开IB后,UITableViewCell的内容将调整大小

来自分类Dev

Highcharts-销毁图例后重新绘制/调整图表大小?

来自分类Dev

使用setGridWidth后无法重新调整jqgrid列的大小

来自分类Dev

延迟加载图像后调用重新调整大小功能

来自分类Dev

单击后未触发 Masonry 容器的调整大小/重新加载

来自分类Dev

调整表格大小后如何使A列重新出现?

来自分类Dev

重新调整磁盘大小后,PostgreSQL 查询速度非常慢

来自分类Dev

移动/调整分区大小

来自分类Dev

QHBoxLayout(大小,调整大小,移动)

来自分类Dev

在桌面布局和移动布局之间重新调整元素大小并重新排序

来自分类Dev

是否可以在调整大小后更改 div 设置为浮动的一侧?

来自分类Dev

关闭并重新打开后,Android Studio中的浮动窗口无法保持位置或大小

来自分类Dev

设置比其初始大小长的文本后,JTextField是否重新调整大小?

来自分类Dev

GParted调整大小/移动选项

来自分类Dev

如何调整大小/移动分区?

来自分类Dev

移动友好的调整大小的图像

来自分类Dev

jQuery移动弹出窗口在页面调整大小或滚动时在错误的位置重新打开

来自分类Dev

元素在浏览器上移动的位置重新调整大小,无济于事

来自分类Dev

无法分配的未分配空间:调整大小并移动分区或重新安装ubuntu?

来自分类Dev

在移动设备上滚动时调整触发器大小,并重新布局到顶部

来自分类Dev

调整大小后将Divs转换为手风琴

来自分类Dev

浮动后将浮动Div宽度调整为100%

来自分类Dev

使用百分比后调整窗口大小时如何使元素停止移动

Related 相关文章

  1. 1

    调整大小后div移动

  2. 2

    Bootstrap 3:调整大小后列会向右浮动

  3. 3

    激活/停用移动菜单并调整大小后,桌面菜单消失

  4. 4

    激活/停用移动菜单并调整大小后,桌面菜单消失

  5. 5

    表格叠加层显示移动和调整大小后的表格

  6. 6

    重新启动程序后,CDockablePane不会调整大小

  7. 7

    重新打开IB后,UITableViewCell的内容将调整大小

  8. 8

    Highcharts-销毁图例后重新绘制/调整图表大小?

  9. 9

    使用setGridWidth后无法重新调整jqgrid列的大小

  10. 10

    延迟加载图像后调用重新调整大小功能

  11. 11

    单击后未触发 Masonry 容器的调整大小/重新加载

  12. 12

    调整表格大小后如何使A列重新出现?

  13. 13

    重新调整磁盘大小后,PostgreSQL 查询速度非常慢

  14. 14

    移动/调整分区大小

  15. 15

    QHBoxLayout(大小,调整大小,移动)

  16. 16

    在桌面布局和移动布局之间重新调整元素大小并重新排序

  17. 17

    是否可以在调整大小后更改 div 设置为浮动的一侧?

  18. 18

    关闭并重新打开后,Android Studio中的浮动窗口无法保持位置或大小

  19. 19

    设置比其初始大小长的文本后,JTextField是否重新调整大小?

  20. 20

    GParted调整大小/移动选项

  21. 21

    如何调整大小/移动分区?

  22. 22

    移动友好的调整大小的图像

  23. 23

    jQuery移动弹出窗口在页面调整大小或滚动时在错误的位置重新打开

  24. 24

    元素在浏览器上移动的位置重新调整大小,无济于事

  25. 25

    无法分配的未分配空间:调整大小并移动分区或重新安装ubuntu?

  26. 26

    在移动设备上滚动时调整触发器大小,并重新布局到顶部

  27. 27

    调整大小后将Divs转换为手风琴

  28. 28

    浮动后将浮动Div宽度调整为100%

  29. 29

    使用百分比后调整窗口大小时如何使元素停止移动

热门标签

归档