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

Question

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

display:inline-block case

当我把 div 放在第一个 display: 块中，左边是浮动的，我有这个：

display:block with floating case

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

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

.red{
  background: red;
}
.green{
  background: green;
}

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

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

How to properly align side-by-side blocks in a container

html

css

children

inline