行内块 div 的水平对齐答案

【问题标题】：Horizontal align of inline-block divs行内块 div 的水平对齐
【发布时间】：2019-08-01 12:14:02
【问题描述】：

我显示了一系列 div 行内块（并且左右边距为 5%），如您所知，一旦达到第一行 div 的限制，其余 div 会自动转到第二行等等（你知道，而不是溢出父级）。然而，这种行为有一个小细节，第二行的元素与第一行的元素没有水平对齐。我知道这是由于边距引起的，但我仍然不知道如何使所有元素等距。以下代码表示该部分的架构。

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

在这里你可以再次看到 div 的结构，并且你可以观察到下面的 div 与上面的不对齐。

https://imgur.com/a/GLgFSsV

【问题讨论】：

感谢您提供 CSS，但能否请您提供相关的 HTML。外部站点可能是恶意的或被过滤系统标记，也可能在以后被删除（使问题无用）。如果您可以更新您的问题以在问题本身 的minimal, complete, and verifiable example 中列出所有相关代码，这将有所帮助。有关更多信息，请参阅有关how to ask good questions 的帮助文章:)
我已经添加了CSS代码，并且从一开始就添加了HTML结构，希望现在可以了。据我所知，这就是所有相关代码。如果删除imgur链接没问题，HTML代码已经描述了结构，imgur链接只提供了视觉表示。

标签： html css

【解决方案1】：

也是因为margin，但主要是因为每个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>

【讨论】：

非常感谢，我对 max-width 属性有点熟悉，但仍然非常感谢您的回答！

【解决方案2】：

修改此问题的一种简单方法是设置最小宽度，以便列至少 x% 宽 - 在 sn-p 中，div 在占 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>

【讨论】：