256

我正在尝试并排放置两个 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 完美运行，它的流畅显示和固定，抱歉问错问题...

4

9 回答 9

289

试试这样的系统：

.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;
}
<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

如果您在另一个上使用margin-left 等于第一个div 的宽度，则只需要浮动一个div。无论缩放如何，这都会起作用，并且不会出现亚像素问题。

于 2013-06-20T15:40:02.873 回答
262

使用 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>

于 2015-12-28T01:11:09.287 回答
99

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

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
于 2013-08-13T17:08:01.047 回答
8

这是我对谷歌搜索的回答：

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>
于 2018-11-27T17:12:39.967 回答
7

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

.my-class {
  display : inline-flex;
}
于 2019-12-25T10:31:26.240 回答
2

您还可以使用网格视图，它也是响应式的，如下所示：

#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

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

于 2020-07-22T08:03:30.977 回答
2 

#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>

于 2021-06-28T00:00:19.720 回答
1 

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 
<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

于 2020-04-24T23:28:08.503 回答
0 

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

虽然不需要margin-right。

于 2020-03-20T09:07:01.000 回答