CSS图标和文字分成两行

CSS图标和文字分两行通常是为了提高UI设计的易读性和空间利用效率。当在一个元素上同时包含文本描述和图示时，将它们分开可以避免过多的信息在同一行导致拥挤。你可以通过以下几个步骤实现：

1. **浮动布局**：对图标的容器使用`float`属性，比如设置`float: left;`使其左对齐，而文本则默认在右侧。

.icon-and-text {
   float: left;
   margin-right: 10px; /* 控制图标与文字之间的间距 */
}

.text-part {
   display: block; /* 确保文本独占一行 */
}

2. **Flexbox**：使用Flexbox可以更直观地控制项目布局。给包含图标的容器设置`display: flex`，然后调整`align-items`来决定图像是在顶部还是底部对齐。

.icon-and-text-container {
   display: flex;
   align-items: center; /* 图像位于中间，文本会在下方 */
}

.text-part {
   flex: 1; /* 文本会自动填充剩余空间 */
}

3. **Grid布局**：如果你需要更复杂的网格布局，可以考虑使用CSS Grid。创建两列，一列用于图标，一列用于文本。

.grid-container {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.icon-column,
.text-column {
   padding: 5px;
}