css怎么把两段并排显示

如何使用CSS将两块内容并排显示

在前端开发中，经常需要将两个块状元素并排显示，比如左侧是图片，右侧是文字描述，或者是左右两个部分各占一半的屏幕宽度。这时候就需要用到CSS的布局技巧。下面介绍几种实现方式。

1. 使用浮动属性

浮动（float）是CSS中主要用于布局的属性之一。它可以让元素脱离文档流，左右移动到其容器的左边或右边，然后使后续的元素紧贴在它的旁边。

实现两个块状元素并排显示的方法，就是给它们都设置浮动属性，同时给它们设置固定的宽度。

.container {
  width: 100%;
  overflow: hidden;  /* 清除浮动 */
}
.container .left {
  width: 50%;
  float: left;
}
.container .right {
  width: 50%;
  float: right;
}

上面的代码将.container元素下面的.left和.right分别设置为50%的宽度，并且分别向左、向右浮动。这样它们就会并排显示。

需要注意的是，如果两个块状元素的高度不一致，会出现高度错乱或者重叠的情况，这时候就需要在它们的容器元素上添加clearfix代码来清除浮动。

2. 使用display:inline-block属性

除了浮动属性，还可以使用display:inline-block属性来实现两个块状元素的并排显示。这个属性会将元素呈现为内联块状元素，并且可以设置宽度和高度。

与浮动属性不同的是，display:inline-block属性不需要清除浮动。

.container {
  font-size: 0;  /* 去除inline-block产生的间隙 */
}
.container .left, .container .right {
  display: inline-block;
  width: 50%;
  vertical-align: top;  /* 对齐方式，可以使用middle、bottom等 */
}
.container .left {
  background-color: red;
}
.container .right {
  background-color: blue;
}

3. 使用flexbox属性

flexbox是CSS3新增的一种布局方式，它可以让开发者更方便地处理复杂的布局需求。使用flexbox布局，需要在容器元素上设置display:flex属性，然后再设置各个子元素的宽度和高度。

与前两种方式不同的是，flexbox布局可以实现子元素宽度自适应的效果，无需指定每个子元素的宽度。

.container {
  display: flex;
}
.container .left {
  flex: 1;  /* 占据剩余空间 */
  background-color: red;
}
.container .right {
  flex: 1;  /* 占据剩余空间 */
  background-color: blue;
}

总结

上面介绍了三种常见的CSS布局方式，分别是使用浮动属性、使用display:inline-block属性以及使用flexbox布局。每种方式都有其优缺点，需要根据实际需求选择合适的方式。

浮动属性是CSS中最常见的布局方式之一，但它需要清除浮动，同时在处理高度不同的元素时可能会出现问题。display:inline-block属性可以很好地解决浮动带来的问题，但有一个常见的问题是会导致元素间产生空格。flexbox布局是最新、最强大的布局方式之一，不需要清除浮动，而且可以很方便地实现响应式布局，但其浏览器支持不如其它两种方式。

在实际开发中，可以根据具体情况选择合适的布局方式，或者在不同场景下组合使用多个方式。