Html 并排的两个 div - 流体显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17217766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two divs side by side - Fluid display
提问by Waleed
I am trying to place two divs side by side and using the following CSS for it.
我正在尝试并排放置两个 div 并为其使用以下 CSS。
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
The HTML is simple, two left and right div in a wrapper div.
HTML 很简单，左右两个 div 在一个包装 div 中。
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.
我已经多次尝试在 StackOverflow 和其他网站上寻找更好的方法，但找不到确切的帮助。
So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.
因此，乍一看，该代码运行良好。问题是，当我以 (%) 增加宽度时，左边的 div 会自动获得填充/边距。因此，在 65% 宽度时，左侧 div 有一些填充或边距，并且与右侧 div 不完全对齐，我尝试将填充/边距设为 0，但没有成功。其次，如果我放大页面，右边的div滑到左边的div下面，就像不是流体显示一样。
Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.
注意：对不起，我已经搜索了很多。这个问题已被问过很多次，但这些答案对我没有帮助。我已经解释了我的情况是什么问题。
I hope there is a fix for that.
我希望有一个解决办法。
Thank you.
谢谢你。
EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...
编辑：对不起，我的 HTML 问题，左侧和右侧都有两个“框”div，它们以 % 填充，因此左侧显示更多的填充，因为宽度更大。抱歉，上面的 CSS 效果很好，它的流畅显示和修复，抱歉问错了问题......
采纳答案by Waleed
Using this CSS for my current site. It works perfect!
将此 CSS 用于我当前的站点。它工作完美！
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
回答by dezman
Try a system like this instead:
试试这样的系统：
.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>You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.
如果在另一个 div 上使用 margin-left 等于第一个 div 的宽度，则只需要浮动一个 div。无论缩放如何，这都将起作用，并且不会出现亚像素问题。
回答by Waleed
This is easy with a flexbox:
使用 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>回答by Malachi Bazar
Here's my answer for those that are Googling:
这是我对那些在谷歌上搜索的人的回答：
CSS:
CSS：
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}
Here's the HTML:
这是 HTML：
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
回答by Coen Damen
Make both divs like this. This will align both divs side-by-side.
像这样制作两个div。这将并排对齐两个 div。
.my-class {
display : inline-flex;
}
回答by CoolPerson879
#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!-->回答by Towsif Ahmed Labib
<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 isn't needed though.
不过不需要 margin-right 。
