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

    <div class="one"></div>

    <div class="two"></div>

</section>

CSS：

.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

使用flexbox很容易：

#wrapper {

  display: flex;

}

#left {

  flex: 0 0 65%;

}

#right {

  flex: 1;

}

<div id="wrapper">

  <div id="left">Left side div</div>

  <div id="right">Right side div</div>

</div>