html - 并排的两个 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 问题，左右两侧都有两个“盒子”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;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

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