3个div等宽居中在div内（不使用浮动）

11 浏览
0 Comments

3个div等宽居中在div内（不使用浮动）

这可以通过浮动很容易实现，但我想避免使用这种方法。如何使用display: inline-block;来实现相同的效果呢？\n以下是使用inline-block的代码：\nhttps://jsfiddle.net/hg7wx64k/\n以下是使用floats的代码：\nhttps://jsfiddle.net/hg7wx64k/\n

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 50px 0 50px;
}
#box1 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: orange;
}
#box2 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: blue;
}
#box3 {
  display: inline-block;
  height: 100%;
  width: 30%;
  background-color: yellow;
}

\n

    
Box 1

    
Box 2

    
Box 3

\n这是三个盒子的屏幕截图，我希望两侧具有相等的边距。我考虑过手动设置边距，但不知道是否是最简洁的解决方案。我可以做很多事情，但我试图更加整洁地完成工作。此外，这个项目我不会使用Bootstrap的网格系统，请不要提出相关建议。只是想知道你们认为最有条理和实用的方法是什么。

0

2 答案

0 Comments

原因：这个问题的出现是因为作者想要在一个容器中创建三个等宽的div，并且这三个div要在容器中居中显示。作者试图使用float属性来实现这个效果，但是他发现这样做会导致其他布局问题。

解决方法：为了解决这个问题，作者可以使用display:flex属性来对容器进行布局。这是一种现代化的对齐方式，可以轻松实现元素的居中对齐。作者可以在容器的样式中添加display:flex属性，并将justify-content属性设置为center。这样，容器中的三个div就会自动等宽并居中显示了。

下面是作者给出的解决方案的代码：

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}
#box1 {
  height: 100%;
  width: 30%;
  background-color: orange;
}
#box2 {
  height: 100%;
  width: 30%;
  background-color: blue;
}
#box3 {
  height: 100%;
  width: 30%;
  background-color: yellow;
}

同时，作者还给出了添加这些div的HTML代码：


  

    
Box 1

  

  

    
Box 2

  

  

    
Box 3

作者感谢提供了一个关于flexbox的资源链接，表示会去学习这个属性。他认为flexbox是一个现代化设计中流行的解决方案，希望能够通过学习它来解决自己的问题。对于这个建议，作者表示感谢并表示祝好运。

0
0 Comments

问题的出现原因是想要在一个父级容器中居中显示三个等宽的子级容器，但是使用了错误的方法。原先的方法是使用inline-block显示子级容器，并设置了宽度和居中。然而，这种方法需要额外指定外边距来控制子级容器之间的间距，而且需要特别注意字体大小的设置。这种方法存在一些问题，所以需要寻找其他解决方法。

为了解决这个问题，可以使用flexbox。使用flexbox可以更方便地控制子级容器的外边距和宽度。在父级容器上设置display: flex;可以创建一个flex容器，然后在子级容器上设置flex: 1;可以使三个子级容器具有相同的宽度并填充剩余空间。此外，可以在父级容器上设置padding属性来控制子级容器之间的间距。

通过使用flexbox，可以简化代码并实现所需的效果。这种方法更加灵活，而且可以更好地理解和应用flexbox布局。

总结一下，使用inline-block方法时，需要额外指定外边距来控制子级容器之间的间距，而使用flexbox方法可以更方便地控制子级容器的外边距和宽度，并且更加灵活。

0