html - 浏览器调整大小时将子 div 文本换行到下一行

Question

当浏览器调整大小并且不再适合时，如何让孩子的全文内容移至下一行？

所以结果是这样

这段文字在 - 第一个孩子
这个文字在第二个孩子

.child1 {
  display: inline;
  margin-right: 10px;
}

.child2 {
  display: inline;
}

<div>
  <div class="child1">
    This text is in - first child
  </div>
  <div class="child2">
    This text is in second child
  </div>
</div>

标签： htmlcss

Answer 1

使用display:inline-blockorfloat:left代替display:inline下一行

.child1 {
  display: inline-block;
  margin-right: 10px;
}

.child2 {
  display: inline-block;
}

<div>
  <div class="child1">
    This text is in - first child
  </div>
  <div class="child2">
    This text is in second child
  </div>
</div>