如何并排获得这两个div？
[英]How to get these two divs side-by-side?
问题描述
I have two divs that are not nested, one below the other. 
我有两个不嵌套的div，一个在另一个之下。 They are both within one parent div, and this parent div repeats itself. 它们都在一个父div中，并且这个父div重复自己。 So essentially: 基本上：
<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_1 and child_div_2 next to each other. 我想让每对child_div_1和child_div_2彼此相邻。 How can I do this? 我怎样才能做到这一点？
8 个解决方案
解决方案1
108 2011-03-22 06:33:19
Since div's by default are block elements - meaning they will occupy full available width, try using - 由于div默认为block元素 - 意味着它们将占用完整的可用宽度，请尝试使用 -
display:inline-block;
The div is now rendered inline ie does not disrupt flow of elements, but will still be treated as a block element. div现在以内联方式呈现，即不会中断元素的流动，但仍将被视为块元素。
I find this technique easier than wrestling with float s. 我发现这种技术比使用float s更容易。
See this tutorial for more - http://learnlayout.com/inline-block.html . 有关详细信息，请参阅本教程 - 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) （不，我没有写）
解决方案2
69 已采纳 2011-03-22 05:58:06
#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/上的工作示例
解决方案3
36 2012-07-11 13:49:30
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>
解决方案4
5 2018-06-02 20:06:37
Using flexbox it is super simple! 使用flexbox非常简单！
#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}
解决方案5
4 2013-08-05 00:58:18
Best that works for me: 最适合我的：
.left{
width:140px;
float:left;
height:100%;
}
.right{
margin-left:140px;
}
http://jsfiddle.net/jiantongc/7uVNN/ http://jsfiddle.net/jiantongc/7uVNN/
解决方案6
4 2011-03-22 05:58:30
Using the style 使用风格
.child_div_1 {
float:left
}
解决方案7
1 2018-06-02 19:10:58
Using flexbox 使用flexbox
#parent_div_1{
display:flex;
flex-wrap: wrap;
}
解决方案8
1 2011-03-22 05:58:31
User float:left property in child div class 用户float:left子div类中的float:left属性
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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.