调整浏览器大小时，将子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>

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

Answer 2

您需要添加媒体查询

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

.child2 {
  display: inline;
}

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