Question

我有容器和内盒的简单结构：

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

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

Answer 1

@media queries

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

出于所有实际目的，这是目前唯一可用的CSS解决方案。有关@media查询为何合适的原因以及其他可用CSS选项无效的原因，请参阅this answer。

JSFiddle Demo

上面的演示有@media个查询，屏幕大小最大可达1200px（可根据需要添加更多），并且不使用JavaScript。 #container的渲染宽度始终为75％（不计算边框），网格位于#container内。

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

<强> HTML

#container

<强> CSS

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

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

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

重点是你不应该使用浮动，而是显示。

Float对中心不友好，也不垂直也不水平，因为它不是站在文档的自然流中。

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

如果你确实需要所有左对齐的东西，那么我认为你只是运气不好。

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。

将固定宽度的div装入流体容器中

6 个答案:

@media queries

HTML

CSS