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

Fiddle

尝试使用这样的系统：

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很容易：

＆＃13;

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

＆＃13;

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

＆＃13;

Answer 3

将此CSS用于我当前的网站。它完美无缺！

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

Answer 4

这是我对那些谷歌搜索的答案：

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>

Answer 5

您还可以使用Grid View，它也可以像这样响应：

#wrapper {
   width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

#left{
    text-align: left;
    grid-column: 1/4;
}

#right {
    text-align: right;
    grid-column: 4/6;
}

，HTML应该如下所示：

<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>

这是更多信息的链接：

https://www.w3schools.com/css/css_rwd_grid.asp

我很新，但是我可以分享我的小经验

Answer 6

execution_delta

execution_date_fn

Answer 7

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

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

Answer 8

<div style="height:50rem; width:100%; margin: auto;">
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
</div>

但不需要保证金权利。

Answer 9

#wrapper{
  display: grid;
  grid-template-columns: 65% 1fr;
}
#left {
  grid-column:1;
  overflow: hidden;
  border: 2px red solid;
}

#right {
  grid-column:2;
  overflow: hidden;
  border: 2px blue solid;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

两个div并排 - 流体显示

9 个答案: