阿拉伯语网站界面图标右侧布局实现方案咨询

针对阿拉伯语从右到左的排版习惯，需调整图标与文本的布局逻辑，以下是具体修改方案：

修改后的CSS代码 #

替换原有.features相关样式为以下代码：

.features {
  padding-top: 20px;
}

.features .icon-box {
  padding-right: 15px; /* 将左内边距改为右内边距，适配RTL排版 */
}

.features .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 5px 60px 10px 0; /* 将左外边距改为右外边距，避开右侧图标 */
}

.features .icon-box i {
  font-size: 48px;
  float: right; /* 将左浮动改为右浮动，让图标居右 */
  color: #d50000;
  display: flex;
}

.features .icon-box p {
  font-size: 15px;
  color: #848484;
  margin-right: 60px; /* 将左外边距改为右外边距，与图标保持间距 */
}

.features .image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

关键修改说明 #

• 图标容器icon-box：调整内边距方向，适配从右到左的排版间距
• 图标元素i：修改浮动方向，让图标固定在内容右侧
• 标题与段落：调整外边距方向，确保文本与右侧图标不重叠，保持合理间距
• 移除无效属性：删除align-items: right（该属性属于flex子项对齐规则，此处使用float布局，该属性无实际作用）

全局排版优化建议 #

如果网站整体为阿拉伯语环境，建议在HTML根标签添加dir="rtl"属性，让页面全局遵循从右到左的排版规则：

<html dir="rtl" lang="ar">

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