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

时间：2019-04-02 14:29:08

标签： css

下面的code是根据Chris Coyier在等距内联块

元素上的文章进行的修改。

它用于使行内块

元素等距（无需使用flex或grid布局）。

代码工作正常。

HTML：     

等距div-内联块方法

<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，我已经修改了HTML以在

中包含文本。 （第一个
包含数字“ 1”。）立即，布局中断：

HTML：

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

该技术可以用于使包含文本的等距内嵌块元素等距吗？

如果没有，如何使这些元素等距？ （我的主要兴趣是使文本卡等距。）

对于本练习，我不想使用flex或grid布局，因为该代码段将成为逐步增强的网页的一部分。

2 个答案:

答案 0 :(得分：2)

只需在vertical-align: top CSS中添加card。我只是更新您的代码，希望对您有所帮助。谢谢

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

答案 1 :(得分：1)

通过在主div内插入辅助div。我们可以使用position的{​​{1}}属性来找到解决方法。

我希望给辅助div一个div位置，以免影响布局。

使用该技术来避免使用在问题中指定的弹性或网格。

absolute
.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%;
}

希望这会有所帮助！

相关问题
最新问题