css两端对齐之div+css布局实现2端对齐的4种方法总结

对于“css两端对齐之div+css布局实现2端对齐的4种方法总结”，我来为您进行详细的讲解。

一、前言

首先需要明确的是，“两端对齐”是指左边和右边都达到同一行，且左右两端的内容分别左对齐、右对齐，并且中间的空隙等宽。

二、方法总结

以下是4种方法总结：

1. flex布局

使用flex布局方式比较简单直观，可以通过设置父容器display属性为flex，利用justify-content和align-items来设置左右对齐和垂直居中。

示例代码：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

1. 行内块元素方式

通过将子元素设置为行内块元素，然后通过设置父元素的text-align属性来实现左右对齐。

示例代码：

.container {
  text-align: justify;
}

.container:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
  line-height: 0;
}

1. 浮动布局方式

使用浮动布局方式，将左右两端的元素通过float属性设置为左浮动和右浮动，然后再通过清除浮动来实现两端对齐。

示例代码：

.left {
  float: left;
}

.right {
  float: right;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

1. grid布局

利用grid布局，将父元素设置为grid容器，通过grid-template-columns属性来设置左右两列的宽度，再通过justify-items属性设置左右对齐。

示例代码：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: space-between;
}

三、总结

以上就是“css两端对齐之div+css布局实现2端对齐的4种方法总结”的攻略了。总的来说，使用flex布局的方式最为简单直观，推荐使用。但是如果兼容性考虑，可以考虑使用其他三种方式。