css 左右对齐-如何在CSS中将三个单词与两个单词对齐

摘要：css实现三字、二字对齐的方式：首先创建一个HTML示例文件； 然后给指定div添加“text-align: justify”等样式，实现三字、二字对齐。推荐：《Css视频教程》要求如下，红框

css实现三字和二字对齐的方法：首先创建一个HTML示例文件； 然后给指定的div添加“text-align: justify”等样式，实现三字对齐和两字对齐。

推荐：《CSS视频教程》

要求如下。 红框内的文字有四个字符、三个字符、两个字符。 如果两端不对齐，可以选择居中对齐或右对齐。 但是css 左右对齐，如果您想像下面这样对齐两端怎么办？

相信以前很多人都这样做过：用两个字符分隔成四个字符的长度。 最好估计应该使用多少空间。

假设我们有以下 HTML：

这世界上只有梦想，只有不能辜负的好女孩！

设计它的风格

div{
  width:500px;
  border:1px solid red;
  text-align: justify;
}

初步效果是这样的

text-align: justify 这些东西是什么？ 在CSS2中，text-align有一个属性值为justify，意思是对齐。 它达到的效果是让一行文字两端对齐显示（文字内容必须超过一行）。

但单独使用还是没用......

为了对齐两端的文字，我们得在行中使用一个空标签来增添趣味，比如等等，这里是我使用的标签

这世间唯有梦想和好姑娘不可辜负！

为这个 i 标签设置以下样式

div i{
  display:inline-block;
  /*padding-left: 100%;*/
  width:100%;
}

padding-left: 100% 和 width: 100% 都可以达到效果css 左右对齐，选择第三个。效果如下

然而，添加HTML元素违反了结构和性能分离的原则。 我们可以使用 after 和 before 伪元素来代替：

div:after {
    content: " ";
    display: inline-block;
    width: 100%;
}