css - 将固定宽度的 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 查询

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

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

JSFiddle 演示

上面的演示@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' 的东西，我在演示中添加了一个基于内联框行为和文本对齐值的转身。

编辑：点清除：文本对齐：中心；是吗。 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;
    overflow: hidden;
    text-align: center;
}
#container .block {
    display: inline-block;
    width: 50px;
    height: 50px;    
    background-color: blue;
    margin: 10px;
}

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

Answer 5

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

#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 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;
}

请查看演示。详细教程，请点这里。