CSS问题：长无空格文本随机掉落至图片下方，求修复

问题根源 #

你用float: left布局图片时，右侧的#replyMessage未形成块级格式化上下文（BFC），当文本是无空格长字符串时，会撑破容器导致整个文本块被挤到图片下方。

解决方案 #

给#replyMessage添加overflow: hidden触发BFC，确保它始终保持在图片右侧；同时通过white-space: nowrap实现文本仅在<br>处换行，长文本不自动折行。如果需要处理超长文本的溢出，可搭配overflow-x: auto提供横向滚动。

修改后的CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  font-family: arial;
  background: #FFFFFF;
}

.threadReply {
  border: 1px solid #d9edff;
  background-color: #dff0ff;
  font-family: arial;
  font-size: 14px;
  max-width: 95%;
  width: max-content;
  color: #333333;
  overflow: hidden;
  padding: 5px 5px 5px 5px;
  margin: 25px;
}

.threadReply:target {
  border: 1px solid #ffe9d3;
  background-color: #ffefdf;
}

.threadReply #replyInfo {
  border: none;
  font-family: arial;
  font-size: 13px;
  color: #333333;
  padding: 5px 10px 0px 5px;
}

.threadReply #replyCount {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #333333;
  padding: 5px 10px 5px 5px;
}

.threadReply #replyInfo a {
  border: none;
  color: #0000EE;
  text-decoration: none;
}

.threadReply #replyInfo a:hover {
  border: none;
  color: #0000EE;
  text-decoration: underline;
}

.threadReply #replyInfo .replyLink {
  border: none;
  color: #0000EE;
  font-size: 12px;
  text-decoration: none;
}

.threadReply #replyVote {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #333333;
  padding: 0px 10px 10px 5px;
}

.threadReply #replyVote a {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #0000EE;
  outline: none;
  text-decoration: none;
}

.threadReply #replyVote a:hover {
  border: none;
  font-family: arial;
  font-size: 12px;
  color: #0000EE;
  outline: none;
  text-decoration: underline;
}

.threadReply .replyImage-resize {
  border: 1px solid #DDDDDD;
  float: left;
  overflow: hidden;
  max-width: 125px;
  cursor: pointer;
  margin: 0px 15px 10px 10px;
}

.threadReply #replyMessage {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  padding: 0px 10px 10px 20px;
  overflow: hidden; /* 触发BFC，固定文本块位置 */
}

.threadReply #replyMessage p {
  white-space: nowrap; /* 仅在<br>处换行 */
  overflow-x: auto; /* 超长文本支持横向滚动 */
}

.threadReply #replyMessage a {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
}

.threadReply #replyMessage a:hover {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  text-decoration: underline;
}

替代方案：使用Flex布局（更稳定） #

如果想避免float的布局问题，可将#replyContent改为Flex布局，逻辑更直观：

.threadReply #replyContent {
  display: flex;
  gap: 15px; /* 替代图片的margin-right */
}

.threadReply .replyImage-resize {
  border: 1px solid #DDDDDD;
  overflow: hidden;
  max-width: 125px;
  cursor: pointer;
  margin: 0px 0px 10px 10px; /* 移除右侧margin */
}

.threadReply #replyMessage {
  border: none;
  font-family: arial;
  font-size: 14px;
  color: #333333;
  padding: 0px 10px 10px 0px; /* 调整左侧padding */
  flex: 1; /* 让文本块占满剩余空间 */
}

.threadReply #replyMessage p {
  white-space: nowrap;
  overflow-x: auto;
}

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