如何让圆角盒子内的图片和文本相邻显示 现有布局文本显示在图片下方如何调整

解决方案 #

块级元素默认独占一行，所以包裹图标的.DashImages和包裹文本的.IconText两个子元素默认上下排列，给父容器新增flex布局即可快速实现并排效果，修改后的CSS如下：

img {
  width: 3vw;
  height: 3vw;
}

.IconText {
  margin-left: 1vw; /* 控制文本和图标之间的间距，可按需调整 */
}

.RoundBox {
  border-radius: 0.5vw;
  border: 1.5px solid grey;
  box-shadow: 0 2px 4px #e3eaf6; /* 补充了阴影的偏移和模糊参数，原配置阴影不会生效 */
  width: 20vw;
  height: 3vw;
  float: left;
  /* 新增flex布局相关属性 */
  display: flex;
  align-items: center; /* 实现图标和文本垂直居中对齐，不需要可以删除 */
  padding-left: 1vw; /* 替代原img的左边距，整体内边距更统一 */
}

如果仅需要水平并排不需要垂直对齐，只保留display: flex属性即可，其余属性可根据你的视觉需求自行调整。

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