我有两个div元素.DIV1具有设定的高度,并且DIV2的高度比DIV1高. 我想让DIV2环绕DIV1.在纯CSS3中有没有出路? Floats I tried but it doesn't work as expected

.div1 {
  float: left;
  width: 30%;
  background: orange;
  display: inline;
}

.div2 {
  float: left;
  background: skyblue;
  display: inline;
}
<div class="wrapper">

  <div class="div1">This is div1. It needs be on the left having particular width

    <p>Not able to sort it out yet</p>

  </div>

  <div class="div2">
    <p>Text content of div2. It will wrap around div1 after its height.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
  </div>
</div>

推荐答案

你就在那里.您唯一需要做的就是移除第二个div上的浮动.这样,第一个div被浮动,第二个div将围绕它流动.

只需确保清除页面下一块上的浮动即可.

.div1 {
  float: left;
  width: 30%;
  background: orange;
  display: inline;
  margin: 0 16px 16px 0;
}

.div2 {
  background: skyblue;
  display: inline;
}
<div class="wrapper">

  <div class="div1">This is div1. It needs be on the left having particular width

    <p>Not able to sort it out yet</p>

  </div>

  <div class="div2">
    <p>Text content of div2. It will wrap around div1 after its height.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra aliquet tellus nec cursus. Donec quis neque non lectus bibendum condimentum vel quis neque. Nulla facilisi.</p>
  </div>
</div>

Html相关问答推荐

Rmarkdown上的垂直标签集

如何找到FontAwese图标的Unicode值?

需要帮助实现悬停动画效果

选中/取消选中带有_hyperscript的多个复选框

Bootstrap 5.3.2模式页脚左填充还是左边距?

渐变进度条位置

SVG';COLOR&39;属性不优先于通用css';COLOR&39;属性

如何将多个类名组合到CSS中的一个关键帧

如何使活动选项卡背景作为父背景图像

如何在 Bootstrap 5 中将两个导航栏元素放在末尾?

视频重新加载而不是在 Swift 中暂停 WKWebView

margin-top 未应用于无序列表的第一项

如何在 flex 项目中忽略子元素的宽度

无法使用 flexbox 裁剪图像

从右到左支持百分号

如何在 blazor 中单击单个按钮调用 2 个等待任务

在 React (NEXT) 中,当我try 进行动态补充时,我无法使用实例this来引用输入

如何创建带有偏移边框线的双色边框?

正确使用视频作为背景

无法从社交栏中 Select 选项