两个div并排

我试图并排放置两个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问题，有两个“框”divs在左右两侧，他们填充％，所以左侧显示更多的填充，因为更大的宽度。 对不起，上面的CSS工作完美，其流体显示和固定，抱歉提出错误的问题...

---

小提琴

试试像这样的系统：

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的宽度。 无论放大倍数如何，这都将起作用，并且不会出现子像素问题。

---

使用Flexbox可轻松实现：

#wrapper {
  display: flex;
}
#left {
  flex: 0 0 65%;
}
#right {
  flex: 1;
}

---

使用这个CSS为我当前的网站。 它工作完美！

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

链接地址: http://www.djcxy.com/p/88477.html

上一篇: Two divs side by side

下一篇: column left floated layout with equal left and right margins