html - 并排堆叠 div

Question

我试图将这些 div 左右并排堆叠。正确的 div 堆栈不会清除。我应该将左侧堆栈向左浮动并与右侧堆栈相同还是左右浮动？

我正在尝试模仿这一点，我正在尝试制作一张带有 div 的表格。 http://www.weareint.io/

演示 https://jsfiddle.net/zeegn9cn/

 * {
   padding: 0px;
   margin: 0px;
 }
 #sections {
   /*--LEFT SECTION COLUMNS--*/
   width: 1000px;
   height: 400px;
   margin: 0 auto;
   background: red;
 }
 .sectionLfirst {
   width: 500px;
   background: orange;
 }
 .sectionLsecond {
   width: 500px;
   background: skyblue;
 }
 .sectionLthird {
   width: 500px;
   background: Indigo;
   clear: both;
 }
 .sectionRfirst {
   /*--RIGHT SECTION COLUMNS--*/
   float: right;
   width: 500px;
   background: orange;
   clear: both;
 }
 .sectionRsecond {
   float: right;
   width: 500px;
   background: skyblue;
   clear: both;
 }
 .sectionRthird {
   float: right;
   width: 500px;
   background: Indigo;
   clear: both;
 }

<!--LEFT SECTION COLUMNS-->
<div id="sections">
  <div class="sectionLfirst">
    <h3>fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionLsecond">
    <h3>fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionLthird">
    <h3>fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>

  <!--LEFT SECTION COLUMNS-->
  <div class="clearfix"></div>
  <div class="sectionRfirst">
    <h3>1fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionRsecond">
    <h3>2fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>
  <div class="sectionRthird">
    <h3>3fdkfjdkfj</h3>
    <p>fdlfkdlkfldkfdlkfdl</p>
  </div>

</div>

Answer 1

你可以将它们包裹在 div 中并像这样 float 它们:

*{
  padding:0px;
  margin:0px;
}
#sections{   /*--LEFT SECTION COLUMNS--*/
  width:1000px;
  height:400px;
  margin:0 auto;
  background:red;
}
.sectionLfirst{
  width:500px;
  background:orange;
}
.sectionLsecond{
  width:500px;
  background:skyblue;
}
.sectionLthird{
  width:500px;
  background:Indigo;
  clear:both;
}  
  .sectionRfirst{  /*--RIGHT SECTION COLUMNS--*/
  float:right; 
  width:500px;
  background:orange;
  clear:both;
}
.sectionRsecond{
  float:right;
  width:500px;
  background:skyblue;
  clear:both;
  
}
.sectionRthird{
  float:right;
  width:500px;
  background:Indigo;
  clear:both;
}
.left {
    float: left;    
}
.right {
    float: right;
}

<!--LEFT SECTION COLUMNS--> 
<div id="sections">
    <div class="left">
        <div class="sectionLfirst">
            <h3>fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionLsecond">
            <h3>fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionLthird">
            <h3>fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
    </div>
    <!--LEFT SECTION COLUMNS--> 
    <div class="clearfix"></div>
    <div class="right">
        <div class="sectionRfirst">
            <h3>1fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionRsecond">
            <h3>2fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
        <div class="sectionRthird">
            <h3>3fdkfjdkfj</h3>
            <p>fdlfkdlkfldkfdlkfdl</p>
        </div>
    </div>
    
</div>