如何用纯CSS3实现两个div并排且div2环绕div1的布局？

可以，仅用纯CSS3完全能实现这个效果。你之前的代码问题在于同时给两个div设置了float:left，这会让它们横向并排，而非让div2的内容环绕div1。

修正后的CSS代码 #

.div1 {
  float: left;
  width: 30%;
  height: 200px; /* 固定高度，可按需调整 */
  background: orange;
  margin-right: 1.5rem; /* 可选：增加右侧间距，避免文本紧贴div1 */
}

.div2 {
  background: skyblue;
  /* 移除float:left，让div2保持默认块级元素特性 */
}

对应的HTML结构（无需修改） #

<div class="wrapper">
  <div class="div1">这是div1，它需要固定宽度并居左
    <p>已解决该问题</p>
  </div>
  <div class="div2">
    <p>div2的文本内容，它将在div1下方环绕布局。</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>

原理说明 #

• 给div1设置float:left后，它会脱离正常文档流靠左排列，同时允许后续块级元素（div2）的内容环绕它。
• div2保持默认块级状态，文本内容先在div1右侧排列，当内容超过div1高度后，会自动填充整个wrapper宽度，实现环绕效果。
• 如需调整div1的固定高度，直接修改height属性即可。

内容的提问来源于stack exchange，提问作者Imran Rafiq Rather