内联块divs的水平对齐

Question

我有一系列的DIV内联块显示(左右边距为5％(，如您所知，一旦达到了DIVS的第一行，其余的Divs会自动转到第二行，依此类推(您知道，而不是溢出父母(。但是，此行为的细节很小，第二行的元素与第一行的元素并不与那些元素保持一致。我知道这是由于边缘而引起的，但我仍然不知道如何使所有元素等距。以下代码表示该节的体系结构。

.parent_div {
  width: 75%;
  float: right;
  /* The "parent of the parent" has its clearfix class*/
}
.child_div {
  margin-left: 5%;
  margin-right: 5%;
  display: inline-block;
}
h4 {
  display: inline-block;
}
p {
  display: inline-block;
}
}

<div class="parent_div">
  <div class="child_div">
    <h4>Some text: </h4>
    <p>some info.</p>
  </div>
  <div class="child_div">
    <h4>Some text: </h4>
    <p>some info.</p>
  </div>
  
   <div class="child_div">
    <h4>Some text: </h4>
    <p>some info.</p>
  </div>
  
   <div class="child_div">
    <h4>Some text: </h4>
    <p>some info.</p>
  </div>
  
   <div class="child_div">
    <h4>Some text: </h4>
    <p>some info.</p>
  </div>
</div>

您可以在这里再次看到Divs的结构，您也可以观察到Divs从下方不与上方的Divs对齐。

https://i.stack.imgur.com/x9pab.jpg

Answer 1

这也是由于边缘，但主要是因为每个div中内容的长度不同。我能想到的最好的方法是使用网格。

.parent_div {
  width: 75%;
  float: right;
  display: grid;
  grid-gap: 2%;
  grid-template-columns: repeat(auto-fill, minmax(300px, max-content));
}
.parent_div .child_div h4 {
  display: inline-block;
}
.parent_div .child_div p {
  display: inline-block;
}

<div class="parent_div">
     <div class="child_div">
          <h4>Some text111: </h4> <p>some info 3234r32.</p>
     </div>
     <div class="child_div">
          <h4>Some text22: </h4> <p>some info 34.</p>
     </div>
     <div class="child_div">
          <h4>Some text 232434: </h4> <p>some infods 33.asr23</p>
     </div>
  
  <div class="child_div">
          <h4>Some text 3243: </h4> <p>some infodsf s34.</p>
     </div>
  
  <div class="child_div">
          <h4>Some text33: </h4> <p>some infodfc fdsf342.</p>
     </div>
  <div class="child_div">
          <h4>Some text22: </h4> <p>some info 34.</p>
     </div>
  <div class="child_div">
          <h4>Some text 3243 234234: </h4> <p>some infodsf s34.sd</p>
     </div>
  
  <div class="child_div">
          <h4>Some text33: </h4> <p>some infodfc fdsf342.</p>
     </div>
  <div class="child_div">
          <h4>Some text22: </h4> <p>some info 34.</p>
     </div>
</div>

Answer 2

修改的一种简单方法是设置最小宽度，以便列至少x％宽 - 在摘要中，divs一次在行上显示两个这是总宽度的75％，每个孩子的宽度最低35％。这样，孩子们正确排列并具有相同的宽度。

.parent_div {
  width: 75%;
  float:right;
  /* The "parent of the parent" has its clearfix class*/
}
.child_div {
  margin: 0 5%;
  display: inline-block;
  min-width:35%;
}
h4, p {
  display: inline-block;
}

<div class="parent_div">
  <div class="child_div">
    <h4>Some text: How on earth? </h4>
    <p>Dunno... seriously</p>
  </div>
  <div class="child_div">
    <h4>Some text: Where?</h4>
    <p>There on the stair</p>
  </div>
  
   <div class="child_div">
    <h4>Some text: my name </h4>
    <p>Rachel.</p>
  </div>
  
   <div class="child_div">
    <h4>Some text:Hi there </h4>
    <p>Nice day</p>
  </div>
  
   <div class="child_div">
    <h4>Some text: hello </h4>
    <p>it's August</p>
  </div>
</div>