Html Div并排没有浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3619233/
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
Div side by side without float
提问by Praneel PIDIKITI
How can I make div 'left' and 'right' look like columns side by side?
如何使 div 'left' 和 'right' 看起来像并排的列？
I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/the guy says it is possible, I can't get it work though...
我知道我可以在它们上使用 float:left 并且这会起作用……但是在这里http://www.barelyfitz.com/screencast...s/positioning/的第 5 步和第 6 步中，这家伙说这是可能的，虽然我无法让它工作......
Code:
代码：
<style>
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
回答by Yi Jiang
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/
不使用floats时的常用方法是使用display: inline-block：http: //www.jsfiddle.net/zygnz/1/
.container div {
display: inline-block;
}
Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inlineelements, like aand em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.
但是请注意它的局限性：在第一个块之后有一个额外的空间 - 这是因为这两个块现在本质上是inline元素，比如aand em，所以两个计数之间有空格。这可能会破坏您的布局和/或看起来不好看，为了这项工作，我不想去掉字符之间的所有空格。
Floats are also more flexible, in most cases.
在大多数情况下，浮动也更灵活。
回答by Zuul
A divis a block level element, meaning that will behave as a block, and blocks can't stay side by side without being floated. You can however set them to inline elementswith:
Adiv是块级元素，这意味着它将表现为一个块，并且块不能在没有浮动的情况下并排放置。但是，您可以将它们设置为内联元素：
display:inline-block;
Give it a try...
试一试...
Another way is to place them using:
另一种方法是使用以下方法放置它们：
position:absolute;
left:0;
and/or
和/或
position:absolute;
right:0;
Note:For this to work as expected, the wrapper element must have a position:relative;so that the elements with absolute positioning stay relative to their wrapper element.
注意：要使其按预期工作，包装元素必须具有 ，position:relative;以便具有绝对定位的元素保持相对于它们的包装元素。
回答by Oriol
You can also use CSS3 flexboxlayout, which is well supportednowadays.
您还可以使用 CSS3flexbox布局，它现在得到了很好的支持。
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background:black;
height:400px;
width:450px;
}
.left {
flex: 0 0 300px;
background:blue;
height:200px;
}
.right {
flex: 0 1 100px;
background:green;
height:300px;
}
See Example(with legacy styles for maximum compatiblity) & Learn moreabout flexbox.
回答by Peter Gruppelaar
I am currently working on this, and i have already a number of solutions. It is nice to have a high quality site, that i can use also for my convenience. Because if you do not write these things down, you will eventually forget some parts. And i can also recommend writing some basic's down if you are starting any kind of new programming/design.
我目前正在研究这个，我已经有很多解决方案。很高兴有一个高质量的网站，我也可以使用它来方便我。因为如果你不把这些东西写下来，你最终会忘记一些部分。如果您正在开始任何类型的新编程/设计，我也可以建议您写下一些基础知识。
So if the float functions are causing problems there is a couple of options you can try.
因此，如果浮点函数导致问题，您可以尝试几个选项。
One is modify the div alignment in the div tag it self like so <div class="kosher" align=left>If this does not suit you then there is another option with margin like so.
一个是修改 div 标签中的 div 对齐方式，就像这样，<div class="kosher" align=left>如果这不适合您，那么还有另一种带有边距的选项。
.leftdiv {
display: inline-block;
width: 40%;
float: left;
}
.rightdiv {
display: block;
margin-right: 20px;
margin-left: 45%;
}
Don't forget to remove the <div align=left>.
不要忘记删除<div align=left>.
回答by Peter Gruppelaar
Use display:table-cell;for removing space between .Left and .Right
使用display:table-cell;了。左和.Right之间消除空间
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
.container > div {
display: table-cell;
}<div class="container">
<div>
<div class="left">
LEFT
</div>
</div>
<div>
<div class="right">
RIGHT
</div>
</div>
</div>回答by giker
You can try with margin for right div
您可以尝试使用右侧 div 的边距
margin: -200px 0 0 350px;
