css 50% 无法并排

大家好，今天我来和大家聊聊CSS在样式设置中的一种常见问题——50%无法并排的情况。

/* 以下是CSS代码 */
.container {
  width: 100%;
}
.left {
  width: 50%;
  float: left;
}
.right {
  width: 50%;
  float: right;
}

很多人在设置两个宽度为50%的元素时，却发现这两个元素并没有并排排列。这是为什么呢？

其实原因很简单，就是因为我们没有考虑盒模型的边框(border)和内边距(padding)所产生的宽度。而在不同的浏览器中，盒模型的边框和内边距所占的宽度是不同的，因此导致了两个元素的宽度总和超出了父容器的宽度，从而使它们不能并排排列。

那么有什么解决方法呢？其实很简单，在两个元素的样式中加上Box-sizing:border-Box;即可，在这种情况下，元素的宽度包括了边框和内边距，并且不会超出父容器的宽度。

/* 以下是CSS代码 */
.container {
  width: 100%;
}
.left {
  Box-sizing: border-Box;
  width: 50%;
  float: left;
}
.right {
  Box-sizing: border-Box;
  width: 50%;
  float: right;
}

以上就是关于CSS中50%无法并排的问题的解决方法。需要注意的是，Box-sizing:border-Box;并不支持IE7及更早版本的浏览器，如果要兼容这些低版本浏览器，可以使用其他的解决方法。