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

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

正方形在一条线上，它们居中（就像我想要的那样）

所以现在我正在使浏览器窗口变小，这就是：

正方形是浮动的，这就是为什么第四个方格正在突破新线。但他们不再集中...... 如您在第二张图片上看到的那样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;
}

你现在不需要任何花车，盒子会尽可能地配合，如果没有足够的空间，那么它们会掉到新的一排......

Answer 2

编辑如下所述，我认为这可能就是您要找的内容，我使用媒体查询来设置框宽，请参阅小提琴：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，当窗口变小时，它会自动分配框之间的间距，请参阅小提琴：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 - ＆gt; child_container - ＆gt;广场。 child_container将是第一个分辨率的x宽度，然后是下一个y宽度，然后是下一个z等等。然后你只需在parent_container上使用.center-content。

旁注：你不需要显示：inline-block;因为你已经漂浮了你的方块。

首先，盒子从来没有集中在一起（至少基于我得到的东西）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

接下来，为了使它居中，你有三个选择：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用JavaScript。

我会使用Flex Box，因为它是浏览器最简单且本机支持的。

当元素浮动时，div占用的宽度超过了所需的宽度

3 个答案: