2

我在一个 div 中有两个浮点数，带有 display:table 和 margin:auto。将这两个 div 居中效果很好。但是，当我使窗口变小时，其中一个浮动会像它应该的那样下降，但是包装器不会缩小到新的大小，因此内部的浮动会与左侧对齐而不是居中。你如何让它适当地缩小？我的意思是， display:table 应该缩小，为什么不呢？

所以这就是我最初的大窗口大小

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

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

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

这就是它的样子

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

任何想法如何使这项工作？有没有办法在没有媒体查询的情况下做到这一点？

这是一个示例代码： http: //jsfiddle.net/WerPx/1/ 它在较大的窗口大小下按预期工作，但是如果您使结果窗口更小，则其中一个浮动在下面，但绿色包装不会缩小以适应新的尺寸。

4

4 回答 4

0

您可以使用媒体查询设置断点，将容器的宽度更改为等于浮动 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以获取工作示例。

于 2012-11-16T10:19:48.990 回答
0

似乎您正在尝试制作响应式布局。在您的示例中，您只需要设置width: 100%为包装器。但如果设计是一个更复杂的标题（水平导航、页脚、侧边栏......），那么使用媒体查询是一个好主意，如下所示：

@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 */
}

进一步阅读：

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

于 2012-11-16T10:35:18.920 回答
0

您正在寻找响应式设计布局，而 twitter bootstrap 与媒体查询一起出现在我的脑海中，并使用百分比值作为宽度。我已经使用 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%;}

}

演示

于 2012-11-16T14:37:42.153 回答
0 
.col {
    width: 100px;
    border:1px solid red;
    display:table-cell;

}
于 2012-11-20T07:25:27.273 回答