时间戳

首页 > 解决方案 > 如何防止 div 中断到下一行

html - 如何防止 div 中断到下一行

问题描述

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

块

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

第二块

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

块包装

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

标签： htmlcss

解决方案

我讨厌使用浮动，但它会处理你所追求的。

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

推荐阅读