CSS文本无法环绕右侧图片问题求助

嘿，我来帮你拆解下这个问题的根源，再给你两个可行的解决方案：

问题出在哪？ #

你现在的布局里，article是块级元素，默认会占满父容器middle的整个宽度，所以aside直接被挤到了article的下方。哪怕你给图片加了float:right，也只是让图片在aside这个容器内靠右，根本没法和article里的文本并排，自然就出现了图片在文本下方的情况。

另外你设置的.middle { display:inline-block; }只影响这个容器在外部布局中的表现，对内部article和aside的垂直排列没有帮助。

解决方案一：把图片移入article内（推荐，最符合文本环绕的逻辑） #

文本环绕浮动元素的核心是：浮动元素要放在需要环绕的文本之前，并且处于同一个流容器内。所以把图片移到article里，就能让文本自然环绕它了。

修改后的HTML #

<section class='middle'>
 <article>
   <!-- 把图片放在article的最开头，文本之前 -->
   <div class="stone_pic">
     <img src="images/aside resized.jpg" alt="side image- stones before and after pressure washing">
   </div>
   
   <h2>Lorem Ipsum</h2>
   <p>PLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
   <!-- 剩下的article内容保持不变 -->
 </article>
</section>

调整后的CSS #

.middle {
  /* 可以加个最大宽度限制整体布局，再居中 */
  max-width: 1200px;
  margin: 0 auto;
}

article {
 font-size:30px; 
 padding: 0 20px; /* 左右都加内边距，避免文本贴到图片或容器边缘 */
}

article h2{
 font-family:'Prompt', sans-serif; 
 font-size: 45px; 
 color:#1C5C35;
}

article ul {
 list-style-image:url(images/bullet\ point\ dark\ green\ small.jpg); 
 margin-left:20px;
}

.stone_pic img{
 float:right; 
 margin-left:20px; /* 图片和文本之间留空隙 */
 margin-bottom:10px; /* 图片底部和下方文本留空隙 */
 width:500px;
 /* 响应式适配：屏幕窄时图片占满宽度，取消浮动 */
 @media (max-width: 550px) {
   width: 100%;
   margin-left: 0;
   float: none;
 }
}

解决方案二：不移动图片，调整article和aside的浮动布局 #

如果不想改动HTML结构，那可以通过让article和aside并排浮动来实现效果，同时处理好响应式：

调整后的CSS #

.middle {
  overflow: hidden; /* 清除浮动，避免父容器高度塌陷 */
  max-width: 1200px;
  margin: 0 auto;
}

article {
 font-size:30px; 
 padding-left: 20px;
 float: left;
 /* 用calc计算宽度：总宽度减去图片宽度+边距 */
 width: calc(100% - 520px);
 box-sizing: border-box; /* 让padding包含在宽度内，避免溢出 */
}

aside {
 float: right;
 width: 500px;
 margin-left: 20px;
}

.stone_pic img{
 width:100%; /* 让图片占满aside的宽度 */
}

/* 其他article、h2、ul样式保持不变 */

/* 响应式适配：屏幕窄时取消浮动，元素占满宽度 */
@media (max-width: 768px) {
  article, aside {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

这两个方案都能解决你的问题，而且不会破坏响应式设计，你可以根据自己的需求选择～

内容的提问来源于stack exchange，提问作者BonChon