两个div并排-流体显示

222

我试图并排放置两个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完美运行，显示流畅并已修复，很抱歉提出错误的问题...

— 瓦利德
source

1

有两个box div？什么是box div？这个问题尚不清楚。

— 约翰·克特吉克

250

尝试这样的系统：

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

展开摘要

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

— 德兹曼
source

1

它无济于事，缩放的东西现在固定了，它说固定的，但是右div现在向下滑动并固定在该位置

— Waleed 2013年

您可能搞砸了一些，检查您的代码，或者告诉我jsFiddle的链接，然后仔细看一下。

— dezman 2013年

噢，我很抱歉。div已通过我上面提供的CSS进行了修复，我在上面给出的CSS只是左右两侧的“ box” div，具有以百分比表示的填充和边距，因为右侧div短，这就是为什么，它具有相等的填充和边距。抱歉...

— Waleed

不应该<section>是<div>呢？

— jvriesem

217

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

展开摘要

— 克里斯托弗·摩尔
source

5

不错，flexbox绝对是必经之路

— 朱利安·索罗

4

根据该网站的数据，flex可以在94％的浏览器上运行。caniuse.com/#search=flex

— 阿德里安

8

@JoostS不是94％的可用浏览器（因为它始终可以在chrome，Mozilla，IE等上运行），不是94％的时间都可以使用，而不管浏览器是什么？

— 乔

6

目前，这一比例为97％以上。基本上，我想说的是，如果您不需要定位IE8，请使用flexbox（在这种情况下以及其他情况下）。Flexbox解决方案几乎总是更优雅，更容易推理。

— 艾伦·托马斯

6

如果您已有网站，则永远不要浏览器共享，请查看您自己的流量日志。在我的大多数网站上，IE8仅占流量的0.01％。但是...我看到了特定的站点，这些站点的受众是使用大量旧版软件的公司，政府或非营利组织中的用户，然后旧的IE浏览器使用率可能会令人惊讶地高。

— cazort

95

在当前站点上使用此CSS。完美的作品！

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

— 瓦利德
source

49

很高兴听到您找到并接受了自己的答案，但是＃方面是什么？这不是您最初的问题。

— JMD

2

在两个子对象上使用float：left（#right）将杀死父div（#wrapper）的高度。因此，此解决方案取决于要求。最好只让一个孩子漂浮。（＃左为您的情况）

— Rahul Gandhi

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>

— 玛拉基巴扎尔
source

3

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

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

— 科恩达门
source

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

展开摘要

— 酷派879
source

什么是溢出原因：隐藏？似乎没有必要……

— Honza

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>

不需要保证金权利。

— Towsif Ahmed Labib
source