Question

第一张照片上有六个相等的div。当屏幕大小增加divs宽度变得更大时，div将填充所有位置（表格单元格或另一个div）。但是如果有足够的空间在第一行放置第四个div就会变成这样（第二张图片）。在此之后，div的宽度变为初始（如第一张图片中所示）。第二行中的两个div必须居中。

是否可以仅使用html + css来解决任务？或者只能借助javaScript。这该怎么做？谢谢你的帮助。

第一张图片：

* * * *   * * * *   * * * *
*     *   *     *   *     *
*     *   *     *   *     *
* * * *   * * * *   * * * *

* * * *   * * * *   * * * *
*     *   *     *   *     *
*     *   *     *   *     *
* * * *   * * * *   * * * *

第二张图片：

* * * *   * * * *   * * * *  * * * *
*     *   *     *   *     *  *     *
*     *   *     *   *     *  *     *
* * * *   * * * *   * * * *  * * * *

          * * * *   * * * *
          *     *   *     *
          *     *   *     *
          * * * *   * * * *

的index.html

<link rel="stylesheet" type="text/css" href="style.css">

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
            <div class="floating-div">Float 4</div>
            <div class="floating-div">Float 5</div>
            <div class="floating-div">Float 6</div>
        </div>
    </div>
</div>

的style.css

.clearfix { width: 30%; height: 100px; border: 1px solid}
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div {  float: left; margin: 10px; border: 1px solid red; }

增加和减少浏览器缩放以查看效果。现在没有必要的结果。 http://jsfiddle.net/TYK3J/4/

Answer 1

我认为可能有几种方法可以实现这一点，但是一种可能的方法是根据设备维度对元素容器进行媒体查询。然后，当媒体查询触发时，您可以设置容器样式以使用text-align：center等对齐所有div的中心;对于这种情况。

<强> HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
  </body>
</html>

<强> CSS

.container{
  width: 615px;
}

.square{
  display: inline-block;
  background: pink;
  width: 200px;
  height: 200px;
}

@media only screen and (min-width : 716px) {
    .container{
      width: 995px;
      text-align: center;
    }
}

工作示例：http://plnkr.co/edit/K7SWAKj4wdjpeLaTwH4e?p=preview

Answer 2

你将不得不在你希望保持内联的3个div中使用某种包装器。类似bootstrap css中的.row。

CSS示例

.wrapper { width: 100%;}
.wrapper > div {
    width: 32%;
    display: inline-block;
    min-height: 50px;
}

这里小提琴： http://jsfiddle.net/michasko/6yVQL/

Answer 3

这不可能通过浮动，因为浮动的意图只是左右对齐元素，最初是在内联文本块内。

现在最常用的方法是使用框中的display: inline-block属性，并通过容器中的text-align: center对齐它们。这个解决方案需要一些技巧来保持像素完美。要让框填满整个空间，您可以使用不同的CSS媒体查询来通过划分可用空间来更改行中的框数（例如，每个框的宽度为25％，其中四个在720px的单行中））。

我建议您设置一个jsfiddle并尝试此解决方案 - 如果您需要更多提示，我们可以为您提供帮助。

附录：最前沿的解决方案是使用柔性盒;然而，这些在Web开发人员中仍然非常罕见，因为浏览器支持最近才变得更好。

附录2：我刚刚看到你标记了你的帖子宽度javascript;我不会建议这个解决方案，尽管有一些像masonry这样的以前流行的lib允许复杂的网格布局。

如何更改浮动div的宽度以填充它们占据的所有空间？

3 个答案: