如何用CSS/HTML实现图文混合元素的固定行布局？

核心问题分析 #

1. 重复ID违规：循环中复用相同ID违反HTML规范，需替换为类名。
2. 布局稳定性不足：inline-block依赖内容宽度，无法固定列位置，改用Flexbox可实现分栏式稳定布局。
3. 样式语法错误：width:100、height:20缺失单位（如px），导致样式失效。

修改后的代码 #

CSS

/* 每个植物项的容器，采用Flex布局实现固定分栏 */
.plant-item {
  display: flex;
  align-items: center;
  gap: 16px; /* 替代空div，统一控制元素间距 */
  margin-bottom: 12px;
}

.plant-image {
  width: 70px;
  height: 70px;
  flex-shrink: 0; /* 固定宽度，不被压缩 */
}

.room-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  flex-grow: 1; /* 占据剩余可用空间 */
  min-width: 0; /* 允许内容超出时自动截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 长文本显示省略号，避免破坏布局 */
}

.room-actions {
  display: flex;
  gap: 24px; /* Edit与Remove按钮的间距 */
  flex-shrink: 0; /* 固定宽度，不被压缩 */
}

.room-edit {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  color: #bdbdbd;
  width: 40px;
}

.room-remove {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  color: #e6555f;
  width: 50px;
}

hr {
  border-color: #bdbdbd;
  margin: 8px 0;
}

HTML

{% for plant in plants %}
<div class="plant-item">
  <div class="plant-image">
    <a href="{{ url_for('Home', Room_id = plant.room_id, Plant_id = plant.id) }}">
      <img src="{{ url_for('static',filename='src/TestPlant.png') }}" width="70" height="70">
    </a>
  </div>
  <div class="room-name">{{ plant.name }}</div>
  <div class="room-actions">
    <div class="room-edit">Edit</div>
    <div class="room-remove">Remove</div>
  </div>
</div>
<hr>
{% endfor %}

关键改进说明 #

• Flex容器控制布局：.plant-item作为Flex容器，让子元素按行排列，每个区域宽度可控，不会因内容长度变化移位。
• 固定与弹性空间分配：flex-shrink:0确保图片和操作按钮宽度固定；flex-grow:1让名称栏占据剩余空间，避免挤压其他元素。
• 长文本处理：通过text-overflow:ellipsis处理过长名称，既保持布局稳定又保证可读性。
• 移除冗余元素：删除空的Whitespacediv，改用Flex的gap属性控制间距，代码更简洁规范。

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