div 当元素浮动时占用的宽度比需要的多

Question

我有以下 html 结构：

<div class="container">
    <div class="square_container">
        <div class="square">
            box1
        </div>
        <div class="square">
            box2
        </div>
        <div class="square">
            box3
        </div>
        <div class="square">
            box4
        </div>
        <div class="square">
            box5
        </div>
    </div>
</div>

这是我的 CSS:

.square_container{
    display:inline-block;
}
.square{
    background-color:red;
    height:150px;
    width:150px;
    float: left;
    margin:20px;
}

容器-class是bootstrap容器。这是它在大屏幕上的外观截图：

正方形在一条直线上并且居中（就像我想要的那样）

所以现在我将浏览器 window 变小了，结果是这样的：

方块是浮动的，这就是第 4 个方块换行的原因。但他们不再居中...... square_container 比您在第二张图片上看到的要宽。所以我试着在第三次之后手动清除。然后 square_container 只占用了它需要的宽度并再次居中。

我的问题是：可以动态清除吗？我不知道它打破了哪个元素。是否有另一种解决方案，我的 square_container 与内部元素一样宽？

感谢您的帮助！

Answer 1

我会使用 flexbox 来解决这个问题，它使这个变得简单得多，只需对您的 CSS

进行此更改

.square_container {
display: flex;
flex-wrap:wrap;
}
.square{
    background-color:red;
    height:150px;
    width:150px;
    margin:20px;
}

你现在不需要任何浮动，盒子会尽可能地适应，如果不够 space 然后它们会掉到新的一行..

Answer 2

edit 如下评论，我想这可能就是你要找的，我使用媒体查询来设置框的宽度，见fiddle：https://jsfiddle.net/5roaxfsj/1/

.square_container{
    display:inline-block;
    width: 950px;
    background-color: lightblue;
}
.square{
    background-color:red;
    height:150px;
    width:150px;
    float: left;
    margin:20px;
}
@media (max-width: 950px){
  .square_container{width: 760px}
}
@media (max-width: 760px){
  .square_container{width: 570px}
}
@media (max-width: 570px){
  .square_container{width: 380px}
}
@media (max-width: 380px){
  .square_container{width: 190px}
}

使用 flex 和 center，这样当 window 变小时它会自动分配框之间的间距，参见 fiddle：https://jsfiddle.net/c259LrpL/21/

.square_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.square {
  background-color: red;
  height: 150px;
  width: 150px;
  margin: 20px;
}

Answer 3

编辑：我注意到这不是您要查找的内容。试试 Bootstrap 附带的 .center-content-block。您必须制作另一个根据媒体查询更改宽度的容器。所以你会有 parent_container -> child_container -> 正方形。 child_container 将是第一个分辨率的 x 宽度，然后是下一个分辨率的 y 宽度，然后是下一个分辨率的 z，等等。然后你只需在 parent_container.

上使用 .center-content

旁注：您不需要 display:inline-block；因为你已经在浮动你的方块了。

首先，盒子从来没有居中（至少根据我得到的）。

.square_container {} .square {
  background-color: red;
  height: 150px;
  width: 150px;
  float: left;
  margin: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="square_container">
    <div class="square">
      box1
    </div>
    <div class="square">
      box2
    </div>
    <div class="square">
      box3
    </div>
    <div class="square">
      box4
    </div>
    <div class="square">
      box5
    </div>
  </div>
</div>

接下来，为了使其居中，您有以下三种选择：

将容器的宽度设置为固定值，然后将左右边距设置为自动。（你可能不想要这个选择）
使用 Flex Box 布局。这是在不使用 JavaScript 的情况下调整容器大小的动态解决方案。 (我的选择)

.square_container {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}
.square {
  background-color: red;
  height: 150px;
  width: 150px;
  float: left;
  margin: 20px;
}

<div class="container">
  <div class="square_container">
    <div class="square">
      box1
    </div>
    <div class="square">
      box2
    </div>
    <div class="square">
      box3
    </div>
    <div class="square">
      box4
    </div>
    <div class="square">
      box5
    </div>
  </div>
</div>

使用JavaScript.

我会使用 Flex Box，因为它最简单，而且浏览器原生支持它。

div 当元素浮动时占用的宽度比需要的多

div takes more width than needed when elements floated

html

css

css-float

twitter-bootstrap