Question

我有以下内容：

<div class='container-main'>
 <div class='container-inner'>
  <div class='clickable-box'>
   stuff
  </div>
  <div class='clickable-box'>
   stuff
  </div>
  <div class='clickable-box'>
   stuff
  </div>
 </div>
</div>

.container-main {
 width: 100%;
}
.container-inner {
 width: 90%;
}
.clickable-box {
 width: 300px;
 height: 300px;
 /* ???? */
}

我试图制作它，这样可点击的框将在内部容器内居中，如果没有足够的空间容纳旁边的另一个可点击框。

但如果有足够的宽度（600px +），那么它们会创建2个列（它们一起居中在内部容器内），如果有更多的空间（900px +），那么3列等......

换句话说，当我开始使用宽度为500px的窗口时，它应该显示1列方框，彼此排列在一起。当我把窗户拉出来时，盒子应该留在中心，直到有足够的空间让另一个人靠近它，然后他们创建了2列，依此类推。

但是当我拖动窗口并留下一个空的大空间时，我不希望列向左或向右浮动

Answer 1

试试这个CSS：

.container-main {
 width: 100%;
}
.container-inner {
 width: 99%;
    text-align:center
}
.clickable-box {
 display: inline-block;
 width: 32%;
margin: 0 auto;
}

Answer 2

我认为您正在寻找的是将clickable-box设置为display: inline-block。设置display: inline-block实质上使得div在文本对齐规则方面就像文本一样，但仍然保留了一些块属性。它很可爱。

<强> HTML

<div class='container-main'>
  <div class='container-inner'>
    <div class='clickable-box'>
     stuff
    </div>
    <div class='clickable-box'>
     stuff
    </div>
    <div class='clickable-box'>
     stuff
    </div>
  </div>
</div>

<强> CSS

.container-main {
  background-color: red;
  text-align: center;
}

.container-inner {
  width: 90%;
}

.clickable-box {
  background-color: blue;
  width: 300px;
  display: inline-block;
}

在这里a fiddle进行演示！

Answer 3

显示：内联块应该是最佳解决方案，如果有空格，这将在一行中显示可点击的框：

.clickable-box {
   width: 300px;
   height: 300px;
   display:inline-block;
}

同时将text-align：center添加到父div，以便可点击的框居中

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

Answer 4

我认为应该这样做。我稍微修改了CSS以添加一些边框以查看框的外观。你当然可以删除这些边界。

Fiddle Demo

.container-main {
 width: 100%;
}
.container-inner {
    width: 90%;
    border:3px solid #454;
    text-align:center;
}
.clickable-box {
    width: 300px;
    height: 300px;
    border:1px solid #000;
    margin:0 auto;
    display:inline-block;

}

Answer 5

我使用浮动规则是因为他们可以按下不适合的方框。例如，float：left会在1096px上给你至少两个盒子。 display:inline 可能在浏览器呈现方面存在问题。

.container-main {
 width: 100%;
}
.container-inner {
 width: 90%;
}
.clickable-box {
 width: 300px;
 height: 300px;
 float:left; // right there. 
}

中心div内的中心内容

5 个答案: