Html 如何并排获得这两个div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5387392/
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
How to get these two divs side-by-side?
提问by Justin Meltzer
I have two divs that are not nested, one below the other. They are both within one parent div, and this parent div repeats itself. So essentially:
我有两个未嵌套的 div，一个在另一个下面。它们都在一个父 div 中，并且这个父 div 重复自身。所以本质上：
<div id='parent_div_1'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_2'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_3'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
I want to get each pair of child_div_1and child_div_2next to each other. How can I do this?
我想让每一对child_div_1和child_div_2彼此相邻。我怎样才能做到这一点？
采纳答案by Hussein
#parent_div_1, #parent_div_2, #parent_div_3 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.child_div_1 {
float: left;
margin-right: 5px;
}
Check working example at http://jsfiddle.net/c6242/1/
在http://jsfiddle.net/c6242/1/检查工作示例
回答by Robin Maben
Since div's by default are blockelements - meaning they will occupy full available width, try using -
由于默认情况下 div 是block元素 - 这意味着它们将占据全部可用宽度，请尝试使用 -
display:inline-block;
The divis now rendered inline i.e. does not disrupt flow of elements, but will still be treated as a block element.
在div现在被呈现内嵌即不破坏流元件的，但仍然被视为块元件。
I find this technique easier than wrestling with floats.
我发现这种技术比与floats摔跤更容易。
See this tutorial for more - http://learnlayout.com/inline-block.html. I would recommend even the previous articles that lead up to that one. (No, I did not write it)
有关更多信息，请参阅本教程 - http://learnlayout.com/inline-block.html。我什至会推荐导致该文章的先前文章。（不，不是我写的）
回答by axs
I found the below code very useful, it might help anyone who comes searching here
我发现下面的代码非常有用，它可能对来这里搜索的人有所帮助
<html>
<body>
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>回答by Sol
Using flexbox it is super simple!
使用 flexbox 超级简单！
#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}
回答by amit_g
Using the style
使用样式
.child_div_1 {
float:left
}
回答by jiantongc
Best that works for me:
最适合我的方法：
.left{
width:140px;
float:left;
height:100%;
}
.right{
margin-left:140px;
}
回答by dasfdsa
Using flexbox
使用弹性盒
#parent_div_1{
display:flex;
flex-wrap: wrap;
}
回答by Pranay Rana
User float:leftproperty in child div class
float:left子 div 类中的用户属性
check for div structure in detail : http://www.dzone.com/links/r/div_table.html
详细检查 div 结构：http: //www.dzone.com/links/r/div_table.html
