Question

我在div中有两个浮点数，显示：table和margin：auto。它可以很好地集中这两个div。然而，当我使窗口变小时，其中一个浮子会像它应该的那样下降，但是包装器不会收缩到新的尺寸，因此内部的浮子变得对齐而不是居中。你如何让它适当收缩？我的意思是，显示：表应该收缩，为什么不收缩？

所以这就是我原来的窗口大小

+----------------+ - div {display:table, margin:auto}
|+-----+  +-----+|
||float|  |float||
|+-----+  +-----+|
+----------------+

使浏览器窗口变小后，div大小保持不变，而不是缩小以适应新的浮动位置。看起来像这样

+--------------+
|+-----+       |
||float|       |
|+-----+       |
|+-----+       |
||float|       |
|+-----+       |
+--------------+

这就是它的外观

    +-------+
    |+-----+|
    ||float||
    |+-----+|
    |+-----+|
    ||float||
    |+-----+|
    +-------+

任何想法如何使这项工作？没有媒体查询，有没有办法做到这一点？

以下是示例代码：http://jsfiddle.net/WerPx/1/ 它可以按照预期的更大的窗口大小工作，但是如果你使结果窗口变小，其中一个浮动下面，但绿色包装不收缩以适应新的大小。

Answer 1

您可以使用媒体查询设置断点，该查询将容器的宽度更改为等于浮动div的宽度。将断点设置在发生浮点的位置。代码更好地解释了这一点：

<div class="div1">
    <div>Float</div>
    <div>Float</div>    
</div>

CSS

.div1 {
    display: table;
    margin: auto;
}

.div1 div {
    float: left;
    width: 250px;
}

/* If the window size is 500px or less then apply these styles */
@media all and (max-width: 500px) {
  .div1    {
      width: 250px;     
   }
}

有关工作示例，请参阅此js fiddle。

Answer 2

好像你正试图制作一个responsive布局。在您的示例中，您只需要将width: 100%设置为包装器。但如果设计是一个更复杂的标题（水平导航，页脚，侧边栏......）那么使用media queries是个好主意，如下所示：

@media (max-width:800px), projection {
  /* The browser window width must not exceed 800px or this device
     must be projected media for these rules to apply */
 }

@media screen and (min-width: 500px) and (max-width: 800px) 
{ 
   /* style sheet that is usable when the viewport is between 500 
      and 800 pixels wide */
}

进一步阅读：

Responsive Tutorials and Guidelines在Smashing Magazine中
Adaptive layouts with media queries（教程）

编辑：对于您的代码，这是使用媒体查询的解决方案：http://jsfiddle.net/WerPx/2/

Answer 3

您正在寻找响应式设计布局和Twitter引导程序是我的想法以及媒体查询和使用宽度的百分比值。我已经使用twitter bootstrap设置了一个基本演示，您可以在窗口调整大小时看到页面的行为有所不同：

.container {
    margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media  (max-width:480px) {
    li{display: block;width: 100%;text-align: left;}
    .custom-row{border:1px solid #000000;}
    ul.upperul{margin-left: 0px;width:100%;}

}

DEMO

Answer 4

.col {
    width: 100px;
    border:1px solid red;
    display:table-cell;

}

如何使div缩小以适应窗口调整大小的浮动？

4 个答案: