Question

我有这个CSS代码：

.container {
    width:100%;
    text-align:center;
}

.box {
    width:20%;
    min-width:350px;
    float:left;
    margin:10px 25px 0 auto;
    padding:10px;
    display:inline;
    border:1px solid black;
}

我想在页面上显示最多4个框，在这个例子中，我有7个，所以4个，然后是3个。如何在顶行的前3个下面显示3下方，但仍然在container div的中心显示4个显示？

http://jsfiddle.net/UJD8L/1/

Answer 1

设置min-width可能与您的目标相冲突，即每个块占据容器的20％或1/4。您可以通过这样做确保您之后的浮动效果：

http://jsfiddle.net/UJD8L/3/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    width:100%;
    text-align:center;
}

.box {
    width:20%;
    /* min-width:350px; */
    float:left;
    margin:10px 25px 0 auto;
    padding:10px;
    display:inline;
    border:1px solid black;
}

<强>更新

将块设置为display: inline-block而不是inline并删除浮动属性使布局中的块居中并允许它们堆叠：

http://jsfiddle.net/UJD8L/4/

.box {
    /* width:20%; */
    min-width:350px;
    /* float:left; */
    display: inline-block;
    margin:10px 25px 0 auto;
    padding:10px;
    /* display:inline; */
    border:1px solid black;
}

Answer 2

为什么不尝试操纵容器高度并添加这些溢出属性。因此，请更改 .container css;

.container {
    width:100%;
    text-align:center;
    height: 230px;
    overflow:scroll;
}

修改：以下是JSFIDDLE链接...

使用CSS在彼此下方显示框

2 个答案: