流体显示：两个 Div 并排排列

Question

我正在尝试并排放置两个 div 并使用以下 CSS。

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTML 很简单，一个包装 div 中包含左右两个 div。

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

我在 StackOverflow 和其他网站上尝试了很多次寻找更好的方法，但找不到确切的帮助。

所以，乍一看，代码运行良好。问题是，当我增加宽度（%）时，左侧 div 自动获得填充/边距。因此，在 65% 宽度时，左侧 div 有一些填充或边距，并且与右侧 div 不完全对齐，我尝试将填充/边距设置为 0 但没有成功。其次，如果我放大页面，右侧 div 会滑到左侧 div 下方，这就像不流畅的显示。

注：抱歉，我查了很多资料。这个问题已被问过很多次，但这些答案对我没有帮助。我已经解释了我的案例中的问题所在。

我希望能解决这个问题。

谢谢。

编辑：抱歉，我的 HTML 问题，左侧和右侧都有两个“box”div，它们的填充以％为单位，因此左侧由于宽度较大而显示更多填充。抱歉，上面的 CSS 工作完美，其流畅的显示和固定，抱歉问了错误的问题...

Answer 1

尝试这样的系统：

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

如果您在另一个 div 上使用 margin-left 等于第一个 div 的宽度，则只需浮动一个 div 即可。无论缩放多少，这都可以工作，并且不会出现子像素问题。

Answer 2

将此 CSS 用于我当前的网站。效果完美！

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}