包含文本的等距浮动<div>元素打破了布局

Question

下面的code是从Chris Coyier关于等距内嵌块元素的文章中修改而来的。

它用于使内嵌块元素等距(不需要flex或网格布局)。

代码运行得很好。

HTML：

等距divs Inline-block方法

​

<div class="cardbox">
  <div class="card">
  </div>

  <div class="card">
  </div>

  <div class="card">
  </div>
</div>

CSS：

 .cardbox
  {
    height: 125px;
    text-align: justify;
    border: 10px solid black;
    /* font-size: 0.1px;     IE 9 & 10 don't like font-size: 0; */
    min-width: 600px;
    /*background-color: peachpuff;*/
  }

  .cardbox::after
  {
    display: inline-block;
    content: '';
    width: 100%; 
  }

  .card
  {
    width: 150px;
    height: 125px;
    display: inline-block;
    border: 1px solid navy;
    background: lightblue;
  }

但是，here，我已经修改了超文本标记语言，以便在。(第一个包括数字“1”。)布局立即中断：

HTML：

<div id="container">
  <div>1</div>
  <div></div>
  <div></div>
</div>

这项技术可以用来使包含文本的内联块元素等距吗？

如果不是，如何使这些元素等距？(我的主要兴趣是使文本卡等距。)

在本练习中，我不想使用flex或网格布局，因为此代码片段将是逐步增强的网页的一部分。

Answer 1

只需在card CSS中添加vertical-align: top即可。我只是更新你的代码，希望能帮到你。谢谢

​

.cardbox
  {
    height: 125px;
    text-align: justify;
    border: 10px solid black;
    min-width: 600px;
  }

  .cardbox::after {
    display: inline-block;
    content: '';
    width: 100%; 
  }

  .card {
    width: 150px;
    height: 125px;
    display: inline-block;
    border: 1px solid navy;
    background: lightblue;
    vertical-align: top;
  }

<div class="cardbox">
  <div class="card">1</div>
  <div class="card"></div>
  <div class="card"></div>
</div>

​

Answer 2

通过在您的主div中插入辅助div。我们可以通过使用div的position属性找到解决方法。

我希望给第二个div一个absolute位置，这样它就不会影响布局了。

此技术用于避免使用flex或grid，正如问题中所指定的那样。

​

.cardbox {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  min-width: 600px;
}

.cardbox::after {
  display: inline-block;
  content: '';
  width: 100%;
}

.card {
  width: 150px;
  height: 125px;
  display: inline-block;
  border: 1px solid navy;
  background: lightblue;
  position: relative;
}

.card--content {
  position: absolute;
  background: tomato;
}

<div class="cardbox">
  <div class="card">
    <div class="card--content">
      1
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    1234
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    </div>
  </div>
</div>

​

这将是我推荐的解决方案。

​

.cardbox {
  height: 125px;
  text-align: justify;
  border: 10px solid black;
  min-width: 600px;
}

.cardbox::after {
  display: inline-block;
  content: '';
  width: 100%;
}

.card {
  width: 150px;
  height: 125px;
  display: inline-block;
  border: 1px solid navy;
  background: lightblue;
  position: relative;
}

.card--content {
  position: absolute;
  background: tomato;
  height: 100%;
  width: 100%;
}

<div class="cardbox">
  <div class="card">
    <div class="card--content">
      1
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    1234
    </div>
  </div>

  <div class="card">
    <div class="card--content">
    </div>
  </div>
</div>

​

希望这能有所帮助！