将固定宽度的 div 打包到流体容器中

Question

我的结构很简单，有容器和内箱：

<div id="container">
    <div class="block"></div>
    // more blocks
    <div class="block"></div>
</div>

我想要实现的是将盒子放在这个容器内的中心，但尽可能将它们打包在一行中。我可以用 JS 做同样的事情：http://jsfiddle.net/JhxSd/ 但我想避免这种情况，只使用 CSS。那可能吗？

Answer 1

@媒体查询

使用一组@media 查询根据当前屏幕尺寸定义不同的网格布局。布局中唯一需要改变的部分是网格包装的宽度。

出于所有实际目的，这是目前唯一可用的 CSS 解决方案。要了解为什么 @media 查询是合适的，以及为什么其他可用的 CSS 选项不起作用，请参阅 this answer。

JSFiddle Demo

上面的演示有@media 查询最大1200px 宽的屏幕尺寸（可以根据需要添加更多），并且不使用JavaScript。 #container 的渲染宽度始终为 75%（不包括边框），并且网格在 #container 内居中。

注意：此解决方案需要在块周围添加一个包装器 div。在每个@media 查询中，包装器的宽度刚好足以容纳适合当前屏幕大小的列数。固定的包装宽度允许整个网格在#container 内居中。如果编辑静态 HTML 不是一个选项，可以在使用 jQuery 加载页面时添加包装器 div。

HTML

<div id="container">
    <div class="grid-wrapper">
        <div class="block"></div>
        ...
    </div>
</div>

CSS

#container {
    width: 75%;
    ...
}
.grid-wrapper {
    margin: 0 auto;
    width: 70px;   /* Default: 1 column */
}
@media (min-width: 200px) {
    .grid-wrapper {width: 140px;}   /* 2 columns */
}
@media (min-width: 290px) {
    .grid-wrapper {width: 210px;}   /* 3 columns */
}
...

Answer 2

我希望这能解决问题：

http://jsfiddle.net/CnjZR/1/

<div id="container">
<div id="wrap">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

CSS：

#container {
width: 100%;
overflow: hidden;
background: red;
    text-align: center;
}
.block {
    width: 20px;
    height: 20px;
    background: blue;
    float: left;
    margin: 5px;
}

#wrap {
    background: green;
    overflow: hidden;
    display: inline-block;
}

Answer 3

不太确定您是否在寻找类似 'flex-justify' 的东西，我在演示中添加了一个基于内联框行为和文本对齐值的转身。

edit : 点清除：text-align:center ;是吗。 http://jsfiddle.net/JhxSd/10/

关键是你不应该使用浮动，而是显示。

浮动不适合居中，也不适合垂直或水平，因为它不是站在文档的自然流中。

 #container {
    width: 75%;
    border: 1px solid;
    text-align:center;
    overflow:hidden;
    padding:1em 1em 0;
    box-sizing:border-box;
    float:left;
}

#container .block {
    width: 50px;
    height: 50px;
    background-color: blue;
    display:inline-block;
    margin: 10px;
}

Answer 4

我想，你几乎已经完成的一切。

#container {
    width: 75%;
    border: 1px solid;
    float: left;
}
#container .block {
    width: 50px;
    height: 50px;    
    background-color: blue;
    float: left;
    margin: 10px;
    overflow: hidden;
}

http://jsfiddle.net/JhxSd/3/

Answer 5

试试这个：

#container {
    width: 75%;
    border: 1px solid;
    float: left;
    overflow: hidden;
    text-align: center;
}
#container .block {
    display: inline-block;
    width: 50px;
    height: 50px;    
    background-color: blue;
    margin: 10px;
}

如果您真的需要所有内容左对齐，那么我认为您只使用 CSS 就不走运了。

Answer 6

您可以将text-align:justify 用于容器，并将display:inline-block 用于div.block。但你需要在最后添加一些占位符标签。像这样：

HTML

<div class="wrapper">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
  <div class="block">6</div>
  <div class="block">7</div>
  <div class="block">8</div>
  <div class="block">9</div>
  <div class="block">10</div>
  <div class="block">11</div>
  <div class="block">12</div>
  <div class="block">13</div>
  <div class="block">14</div>
  <div class="block">15</div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS

.wrapper {
  width: 75%;
  border: 1px solid;
  font-size: 0.1px;
  text-align: justify;
}
.wrapper:after {
  content:"";
  display:inline-block;
  width: 100%;
}

.wrapper div{  
    font-size: 16px;
    display:inline-block;
    *display: inline;
    zoom:1;
    color: #fff;
    background-color:blue; 
    width: 50px; 
    height: 50px; 
    margin: 10px; 
}
.wrapper .placeholder {
  width: 50px;
  height: 0px;
  background:none;
}

请查看demo。详细教程请点击here。