html - 一个 div 与另一个 div 碰撞而不是堆叠在其上

Question

有没有一种方法可以让蓝色 div 文本在与黄色 div 对接时自动换行，而不是堆叠在黄色 div 之上？有没有办法可以使用溢出或自动换行？这将使这项工作？

blue div to wrap once it butts up against yellow div

.container {
  width:100%;
  border: px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: table;
 border: 1px solid green;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {border: 1px solid blue;
  display: table;
  float: left;
}

.container .learn {
  float: right;border: 1px solid yellow;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}

<div class="container">
  <div class="wrap1">
    <div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->
  <div class="wrap2">
    <div class="content">
     <p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

     

Answer 1

使用 flex 盒!

将 display: flex; 添加到您的容器中。一旦它到达另一个 div，这将包装您的文本。我提供了一个适合您的代码片段示例。

.container {
  width:100%;
  border: px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: flex;
  justify-content: space-between;
 border: 1px solid green;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {border: 1px solid blue;
  display: table;
  float: left;
}

.container .learn {
  float: right;border: 1px solid yellow;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}

<div class="container">
  <div class="wrap1">
    <div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->
  <div class="wrap2">
    <div class="content">
     <p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->