一个 div 一旦它与另一个 div 对接并且不堆叠在上面，就会包裹起来

Question

有没有办法让蓝色div在文本与黄色div对接而不是堆叠在黄色div上时换行？有没有办法使用溢出或自动换行？那会让这个工作吗？

蓝色div 一旦它与黄色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

使用 flexbox！

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

Answer 2

你可以把 display： flex; 放到 wrap1 类而不是显示表上，我相信这会得到你想要的效果。

Answer 3

在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;
word-wrap: break-word;
width: 50%;
}
.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 yfkasjldkfjl;kjsdfl;kjsdfasdfasdfou 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 4

Flexbox 可以做到这一点。

.container {
width: 60%; /* for demo */
margin:auto;
border: 1px solid #d3d3d3;
}
.container div {}
.wrap1 {
display: flex;
border: 1px solid green;
}
.title {
flex: 1;
border: 1px solid blue
}
.container .learn {
border: 1px solid yellow;
cursor: pointer;
}

<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>
</div>
<!--container-->

Answer 5

如果你想要一个真正干净的解决方案，我建议使用弹性盒！在弹性盒装容器中定义的元素必须根据其需求(其中的内容量(在它们之间共享给定的宽度。

我喜欢在小元素中添加最小宽度，这样它就不会被压扁。

.container {
width:100%;
border: 5px solid #d3d3d3;
}
.wrap1 {
border: 1px solid green;
width: 100%;
display: flex;
flex-direction: row;
}
.wrap2 {
border: 1px solid red;
width: 100%;
}
.title {
border: 1px solid blue;
}
.learn {
min-width: 25%;
border: 1px solid yellow;
cursor: pointer;
}

我建议尽可能远离漂浮物。它将元素从其传统流程中移除，并在样式设置时可能导致其他问题。另一种解决方案是使用display: inline-block- 如果子元素不占用其父元素容器的整个宽度，它们将共享空间。75%/24%有点不稳定，这就是为什么我更喜欢弹性盒。

.container {
width:100%;
border: 5px solid #d3d3d3;
box-sizing: content-block;
}
.wrap1 {
border: 1px solid green;
width: 100%;
}
.wrap2 {
border: 1px solid red;
width: 100%;
}
.title {
border: 1px solid blue;
max-width: 75%;
display: inline-block;
}
.learn {
display: inline-block;
width: 24%;
border: 1px solid yellow;
cursor: pointer;
}