HTML/CSS布局求助：p标签文本换行导致兄弟div错位

嘿，我太懂你这个头疼的布局问题了！核心根本不是文本换行的锅，而是你的prop_desc没设置合适的宽度——浮动元素默认宽度是靠内容撑开的，当p标签里的文本变多要换行时，prop_desc的宽度会被撑得超过父容器article剩下的空间，自然就被挤到图片下面去了。

方案一：调整浮动布局的宽度设置 #

给prop_desc设置一个基于父容器宽度的计算值，让它刚好占满图片右侧的空间，这样文本就会在这个固定宽度里自动换行。修改后的CSS如下：

article { 
  border: 1px solid black; 
  padding: 0.5em; 
  display: inline-block; 
  width: 500px; 
  box-sizing: border-box; /* 加上这个确保padding不会额外撑大容器 */
}
article:after { content: " "; display: block; clear: both; }
.prop_img { 
  float: left; 
  text-align: center; 
  position: relative; 
  height: 150px; 
  width: 200px; 
}
.location { 
  position: absolute; 
  opacity: 0.6; 
  left: 0; 
  bottom: 0; 
  width: inherit; 
}
.location p { 
  color: #000; 
  background-color: #ffffff; 
  font-size: 20px; 
  font-weight: bold; 
  margin: 0; 
  overflow: auto; 
}
.prop_desc { 
  float: left; 
  margin-left: 0.5em; 
  position: relative; 
  height: 150px; 
  width: calc(100% - 200px - 0.5em); /* 关键：计算剩余可用宽度 */
  box-sizing: border-box; /* 确保内部元素不会超出容器宽度 */
}
.prop_text { text-align: left; }
.prop_text h3 { margin-top: 0; }
.prop_button { 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  outline-style: double; 
}
.detail_button { background-color: blue; }
.detail_button:hover { background-color: red; }

简单解释下：

• calc(100% - 200px - 0.5em) 精准减去左侧图片的200px宽度和prop_desc的左margin，让它刚好填满剩余空间
• box-sizing: border-box 避免容器的padding和border额外增加宽度，防止超出父容器

方案二：改用Flex布局（更现代稳定） #

浮动布局本来就容易出这种排版bug，用Flex布局能更轻松实现自适应并列，还不用处理清除浮动的麻烦。修改后的代码如下：

CSS代码 #

article { 
  border: 1px solid black; 
  padding: 0.5em; 
  display: flex; /* 改为flex容器 */
  width: 500px; 
  box-sizing: border-box;
  gap: 0.5em; /* 代替margin-left，控制元素间距更直观 */
}
.prop_img { 
  text-align: center; 
  position: relative; 
  height: 150px; 
  width: 200px; 
  flex-shrink: 0; /* 固定宽度，不被压缩 */
}
.location { 
  position: absolute; 
  opacity: 0.6; 
  left: 0; 
  bottom: 0; 
  width: inherit; 
}
.location p { 
  color: #000; 
  background-color: #ffffff; 
  font-size: 20px; 
  font-weight: bold; 
  margin: 0; 
  overflow: auto; 
}
.prop_desc { 
  position: relative; 
  height: 150px; 
  flex: 1; /* 自动占满剩余空间 */
}
.prop_text { text-align: left; }
.prop_text h3 { margin-top: 0; }
.prop_button { 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  outline-style: double; 
}
.detail_button { background-color: blue; }
.detail_button:hover { background-color: red; }

HTML代码（无需修改，保持原样即可） #

<div class="container">
<article>
<div class="prop_img">
<img src="image" height="150px" width="200px">
<div class="location">
<p>Location</p>
</div>
</div>
<div class="prop_desc">
<div class="prop_text">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut l est laborum.</p>
</div>
<div class="prop_button">
<input class="detail_button" type="button" name="Details" value="Details">
</div>
</div>
</article>
</div>

Flex布局的优势：

• 不用手动清除浮动，布局稳定性拉满
• flex:1 让prop_desc自动填充剩余空间，窗口缩放时也能自适应
• gap 属性轻松控制元素间距，比margin更简洁不易出问题

这两种方案都能解决你的问题，个人更推荐Flex布局，毕竟是现在前端布局的主流方式，后续维护和调整也更省心。

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