如何防止div中断到下一行

Question

我有一个div，里面有两个div，其结构如下。

但是，当第二个div包含更多内容时，它看起来像这样。

我该怎么做才能得到这样的东西？

第二个div的内容只有文本，并且文本在第一个div下方继续。

Answer 1

我讨厌使用float，但是它将处理您的需求。

.floater {
  background-color: cyan;
  display: inline-block;
  float: left;
  margin: 0 20px 20px 0;
  width: 40%;
}

.main {
  background-color: yellow;
 }

<div class="floater">Morbi posuere elementum finibus. Donec tincidunt, arcu ac egestas ornare, nulla nulla ullamcorper arcu, sit amet consequat nunc quam ac justo. Nulla vestibulum cursus erat, vel aliquam lorem rhoncus vel. Praesent non dolor ut ligula scelerisque varius. Maecenas eu enim in enim dignissim suscipit. Duis aliquet scelerisque imperdiet. Cras ac convallis arcu, vel semper elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non mauris sed nibh egestas semper eget in odio. Suspendisse ornare ut enim at consequat. In fermentum libero augue, vitae auctor sem pellentesque ut. Nulla a erat porttitor, consequat neque eget, aliquet lectus. Sed hendrerit et lorem ut tempus. Donec placerat ipsum sit amet dui ullamcorper, sed semper quam dictum. Aliquam nunc magna, gravida et sagittis id, pretium et nisl. Cras mollis felis diam, non pellentesque orci cursus et. Quisque vestibulum tincidunt magna sit amet sodales. Aliquam aliquam nibh dolor, sed sodales odio convallis in. Cras dapibus aliquet finibus. Vivamus eu leo mattis, suscipit ex vitae, aliquet dolor.

Ut convallis, urna aliquet lobortis facilisis, sem justo varius ipsum, eu tincidunt augue purus varius libero. Sed mauris justo, ornare et fringilla a, tristique at sapien. Mauris bibendum iaculis risus, tincidunt euismod quam placerat volutpat. Maecenas interdum ornare nisl nec convallis. Pellentesque elit dui, viverra ac ipsum non, tempor interdum tortor. Aenean in pellentesque justo. Aenean sit amet rutrum lectus. Donec commodo fermentum nunc, et tempus enim iaculis vitae. Praesent venenatis vulputate scelerisque.

Vivamus auctor ex nec elit imperdiet, eget hendrerit lacus lacinia. Suspendisse consectetur quis arcu mollis aliquam. Maecenas condimentum arcu risus, eget gravida justo ultricies in. Maecenas pretium sem ante, ut tempor velit imperdiet non. Mauris cursus tortor eget ultricies aliquam. Vivamus lacinia efficitur quam et sollicitudin. Morbi pretium in eros nec egestas. Sed ut libero nec mi sollicitudin rhoncus ut a purus. Cras vitae iaculis purus. Nullam at rhoncus enim. Nunc sed vestibulum elit. Praesent volutpat neque nec congue egestas. Vestibulum sit amet porttitor massa, sit amet varius purus. Aliquam id maximus lorem.

Suspendisse sed nunc convallis, bibendum arcu a, fermentum nulla. Quisque eget lorem at dui tempus sodales nec ut arcu. Pellentesque sodales nunc ac massa tincidunt, a pretium purus condimentum. Aenean vitae bibendum mi. In interdum, lorem ac rhoncus ullamcorper, ligula nisl elementum turpis, ut ultricies massa sem eget libero. Etiam fermentum blandit nisl et volutpat. Sed molestie ante vitae leo pharetra volutpat. In at felis sem. Praesent eu nunc eu purus posuere tempus in ac est. Nullam quis arcu velit. Integer nec nulla sit amet velit cursus semper. Ut turpis arcu, fermentum a nisi non, feugiat molestie odio. Morbi et felis pulvinar, blandit nisl non, pellentesque tellus.

Praesent ac risus at turpis dignissim eleifend. Cras non magna facilisis nulla vulputate bibendum id et augue. Integer tempor eleifend suscipit. Mauris dolor arcu, consectetur in congue at, fringilla cursus nisi. Pellentesque vestibulum congue odio sed pretium. Proin ante justo, volutpat vitae pharetra in, porta non turpis. Morbi ut risus molestie, sagittis erat ut, facilisis mauris. Aenean ultrices sem non elit mollis, eu volutpat metus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque odio mi, auctor non turpis at, faucibus dapibus massa. Curabitur dapibus turpis malesuada vehicula dignissim. Nunc non mollis justo. In posuere faucibus sodales. Praesent accumsan leo at egestas sollicitudin.</div>

Answer 2

您需要在第一个div上设置 width （固定宽度或最大宽度）和左浮点。这是一个 非常 基本示例：

<div style="background-color: blue; padding: 10px;">
<div style="background-color: blue; color: white; float: left; margin-right: 20px; padding: 10px 20px 10px 10px; width: 50%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet quam porta, porttitor leo sed.
</div>
<div style="background-color: red; color: white; padding: 10px; ">
    Quisque erat mi, pretium ut nibh ut, vulputate sollicitudin leo. Quisque condimentum leo tortor, et vulputate justo aliquet convallis. Aliquam erat volutpat. Duis aliquam ligula velit, vulputate aliquam elit tincidunt at. Maecenas at turpis pretium, convallis lacus quis, efficitur ipsum. Quisque ullamcorper mauris et tortor laoreet rutrum. Sed tincidunt metus quis maximus interdum. Phasellus at sodales arcu, nec bibendum neque. Donec id posuere enim, pellentesque elementum augue. Donec venenatis libero sapien, a tempor dolor tristique ac.
</div>
</div>

在此处查看w3schools条目以获取完整参考： https://www.w3schools.com/cssref/pr_class_float.asp

Answer 3

您可以尝试将其浮动

float: left;

但是您应该知道每个div都像一个块，并且每个块不能重叠，除了一个在另一个内部，因此将ine小div放在大div内，将小div浮动。

Answer 4

除非文本环绕div / img，否则不可能。您不能将div换成另一个div。

您可以创建如下形状：（不支持） https://css-tricks.com/almanac/properties/s/shape-outside/