如何在Angular中创建左右段落为不同颜色的内容框

你可以通过Flex布局快速实现需求，以下是可直接复用的代码：

1. 组件模板代码 #

对应你的组件.html文件内容：

<!-- 内容框容器 -->
<div class="custom-content-box">
  <p class="left-paragraph">左侧段落自定义内容</p>
  <p class="right-paragraph">右侧段落自定义内容</p>
</div>

2. 组件样式代码 #

对应你的组件.css/.scss文件内容：

/* 内容框基础样式，可按需调整边框、内边距、宽度 */
.custom-content-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin: 8px 0;
}
/* 左侧段落样式，可自定义颜色、字号等属性 */
.left-paragraph {
  flex: 1;
  margin: 0;
  color: #1e40af; /* 左侧默认蓝色，可修改为你需要的色值 */
  font-size: 14px;
}
/* 右侧段落样式，可自定义颜色、字号等属性 */
.right-paragraph {
  flex: 1;
  margin: 0;
  text-align: right;
  color: #dc2626; /* 右侧默认红色，可修改为你需要的色值 */
  font-size: 14px;
}
/* 小屏幕响应式适配，屏幕宽度小于768px时两段上下排列 */
@media (max-width: 768px) {
  .custom-content-box {
    flex-direction: column;
    gap: 8px;
  }
  .right-paragraph {
    text-align: left;
  }
}

3. 补充说明 #

如果需要动态绑定两段的内容，直接在模板中使用Angular插值语法{{}}绑定组件类中定义的变量即可。Angular 14+独立组件无需额外导入依赖，NgModule项目也无需额外引入模块即可直接使用上述代码。

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