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

小提琴

尝试使用这样的系统:

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;
}

如果你在另一个上使用margin-left等于第一个div的宽度,你只需要浮动一个div.无论缩放是什么,这都将有效,并且不会出现子像素问题.

Answer 2

使用flexbox很容易:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

Answer 3

将此CSS用于我当前的站点.它完美无缺!

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

Answer 4

让两个 div 都像这样。这将使两个 div 并排对齐。

.my-class {
  display : inline-flex;
} 

Answer 5

这是谷歌搜索的答案：

CSS：

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

这是HTML：

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>