窄屏场景下左对齐文本旁图标对齐问题解决

问题描述 #

在textarea底部设置左右两个辅助文本时，窄屏尺寸下出现两个异常：

• 左侧带图标的辅助文本换行后，图标垂直居中而非顶部对齐
• 右侧辅助文本换行后无法保持右对齐

解决方案 #

通过调整CSS属性即可解决，无需计算换行断点：

修改后的CSS代码 #

.wrapper {
  position: relative;
}

textarea {
  width: 100%;
  height: 200px;
  resize: none;
}

.helpers {
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 让左右模块整体顶部对齐 */
}

.helper-wrapper {
  display: flex;
  align-items: flex-start; /* 图标与文本顶部对齐 */
  gap: 6px; /* 可选：给图标和文本添加间距，优化视觉 */
}

img {
  width: 20px;
}

#help2 {
  text-align: right; /* 强制文本右对齐 */
  /* 若允许右侧文本换行，取消下面两行注释： */
  /* display: inline-block; */
  /* max-width: 45%; */ /* 根据布局需求调整最大宽度 */
}

对应的HTML代码（无需修改） #

<div class="wrapper">
  <textarea id="text" name="text" placeholder="Placeholder" rows="8" col="10"></textarea>
  <div class="helpers">
    <div class="helper-wrapper">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/acid.svg" />
        <span id="help1">This is some helper text that will wrap when screen is narrow</span>
    </div>
   
    <span id="help2">More help text that needs to stay right-aligned even when wrapped</span>
  </div>
</div>

关键修改说明 #

1. 左侧图标对齐：将.helper-wrapper的align-items从center改为flex-start，图标会始终和文本顶部对齐，无论文本换多少行。
2. 右侧文本换行对齐：将#help2的text-align从center改为right，若需要允许文本换行，添加display: inline-block和max-width，换行后的内容会自动保持右对齐。
3. 整体模块对齐：给.helpers添加align-items: flex-start，确保左右两个辅助模块在高度不同时（比如一侧换行一侧不换行）保持顶部对齐，避免布局错位。

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