Question

这将我的div框包装在2列

中

.box {
   float:left;
   height: 300px;
   min-width: 800px;
   width:50%;
   margin: 0px auto; /* <= do this when smaller then 800px ? */
}

但是当屏幕宽度上只有一列方框符合时，如何告诉浏览器将方框（margin: 0px auto;）居中。现在该框与屏幕左侧对齐。

Answer 1

不完全清楚你想要什么。

您可以使用媒体查询来处理不同的屏幕宽度状态：

@media all and (max-width: 799px) {

    .box {
        float: left;
    }

}

@media all and  (min-width: 800px) {

    .box {
        margin-left: auto;
        margin-right: auto;
    }

}

Answer 2

你已经让它无法使用float:left两个或一个。

这里有效的代码：

<强> HTML

<div style="text-align:center">
  <div class="box"></div>
  <div class="box"></div>
</div>

<强> CSS

.box {
    display:inline-block;     
    height: 300px;
    min-width: 800px;
    width:50%;
    background:yellow;
}

JSFIDDLE.

您在父元素上需要的text-align:center，因为margin:0 auto不适用于inline-block元素。

如果小于最小宽度，则向左浮动或自动边距

2 个答案: