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

【问题标题】：wrap child div text onto next line when browser resized浏览器调整大小时将子 div 文本换行到下一行
【发布时间】：2019-05-29 17:49:10
【问题描述】：

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

结果是这样的

此文本在 - 第一个孩子
此文本在第二个孩子中

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

【问题讨论】：

我确实尝试过，这就是为什么我在这里....我努力让它工作

标签： html css

【解决方案1】：

下一行使用display:inline-block 或float: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>

【讨论】：

【解决方案2】：

您需要添加媒体查询

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

.child2 {
  display: inline;
}

@media screen and (max-width: 100px) {
  .child2 {
    display: block;
  }
}

【讨论】：