Question

我有一个带显示块的div，在其中我有其他内联块。这就是我所拥有的。

当我把div放在display：block的第一个里面时，浮动左边，我有这个：

#container {
    display: block;
    width: 50%; /*Of its parent*/
}

#container > div {
    display: block;
    width: 22%;
    padding: 5px 1.2%;
    float: left;
 }

 /* or

 #container > div {
     display: inline-block;
     width: 22%;
     padding: 5px 1.2%;
 }

 or

 #container > div {
     display: inline-block;
     width: 22%;
     padding: 5px 1.2%;
     float: left;
 }

 */

拜托，有人可以告诉我这是错的并帮助解决它吗？感谢

Answer 1

尝试使用display: flex。浮动往往会产生问题。 Flex希望解决其中的一些问题。这里有一个很棒的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

5px 1.2%和22%无法正常使用，请尝试

#container > div {
    display: block;
    width: 25%;
    padding: 5px 1%;
    margin: 0;
    float: left;
 }

＆＃13;

#container>div {
  display: block;
  width: 23%;
  padding: 5px 1%;
  margin: 0;
  float: left;
  height: 100px;
}

.red{
  background: red;
}
.green{
  background: green;
}

＆＃13;

<div id="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="red"></div>
  <div class="green"></div>
</div>

＆＃13;

如何正确对齐容器中的并排块

2 个答案: