[分享]css两列文字分别左对齐

在网页设计中，常常需要将页面内容分为两列并按照一定规则对齐。本文将介绍如何使用CSS实现左对齐的两列文字。HTML结构如下： 左边的文字 左边的文字 左边的文字 右边的文字 右边的文字 右边的文...

在网页设计中，常常需要将页面内容分为两列并按照一定规则对齐。本文将介绍如何使用CSS实现左对齐的两列文字。

HTML结构如下：

<div class="container">
  <div class="left-column">
    <p>左边的文字</p>
    <p>左边的文字</p>
    <p>左边的文字</p>
  </div>
  <div class="right-column">
    <p>右边的文字</p>
    <p>右边的文字</p>
    <p>右边的文字</p>
  </div>
</div> 

首先，我们需要给父元素设置一个固定宽度，并且使用浮动将左右两列元素分隔开来。示例代码如下：

.container {
  width: ***px;
  overflow: hidden;
}

.left-column {
  width: 50%;
  float: left;
}

.right-column {
  width: 50%;
  float: right;
} 

接下来，我们需要使用CSS清除两个列之间因浮动产生的空白间隔。这可以通过给右列元素设置一个左边距的负值来实现。示例代码如下：

.right-column {
  width: 50%;
  float: right;
  margin-left: -4px; /* 为了兼容各浏览器，这个值需要微调一下 */
} 

最后，根据需要设置每一列中段落的样式即可。比如我们想让两边的文字左对齐，可以为它们设置text-align: left;。示例代码如下：

.left-column p,
.right-column p {
  text-align: left;
} 

当然，你还可以根据需求为段落设置其他样式，比如字体、字号、颜色等等。总之，CSS提供了非常灵活的方式来设计网页中的布局，只需要结合自己的需求进行相应的调整即可。