两个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

尝试这样的系统：HTML：<section class="container">&nbsp; &nbsp; <div class="one"></div>&nbsp; &nbsp; <div class="two"></div></section>CSS：.container {&nbsp; &nbsp; width: 80%;&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; background: aqua;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; padding: 10px;}.one {&nbsp; &nbsp; width: 15%;&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; background: red;&nbsp; &nbsp; float: left;}.two {&nbsp; &nbsp; margin-left: 15%;&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; background: black;}如果您在另一个div上使用margin-left等于第一个div的宽度，则只需浮动一个div。无论变焦如何，这都将起作用，并且不会出现子像素问题。

Answer 2

使用flexbox很容易：#wrapper {&nbsp; display: flex;}#left {&nbsp; flex: 0 0 65%;}#right {&nbsp; flex: 1;}<div id="wrapper">&nbsp; <div id="left">Left side div</div>&nbsp; <div id="right">Right side div</div></div>