如何并排获得这两个div? [英] How to get these two divs side-by-side?

问题描述

我有两个没有嵌套的 div，一个在另一个下面.它们都在一个父 div 内，并且这个父 div 重复自身.所以本质上:

<div class='child_div_1'></div><div class='child_div_2'></div>
<div id='parent_div_2'><div class='child_div_1'></div><div class='child_div_2'></div>

<div id='parent_div_3'><div class='child_div_1'></div><div class='child_div_2'></div>

我想让每一对 child_div_1 和 child_div_2 彼此相邻.我该怎么做?

解决方案

#parent_div_1, #parent_div_2, #parent_div_3 {宽度:100px；高度:100px；边框:1px纯红色；右边距:10px；向左飘浮;}.child_div_1 {向左飘浮;右边距:5px；}

检查工作示例在 http://jsfiddle.net/c6242/1/

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 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. How can I do this?

解决方案

#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/

这篇关于如何并排获得这两个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！