并排堆叠div

时间：2015-07-16 20:24:37

标签： html css

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

我试图模仿这个，我试图制作一张桌子但是有了div。 http://www.weareint.io/

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

＆＃13;
＆＃13; 
 * {
   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;
 }
＆＃13; 
<!--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>
＆＃13;
＆＃13;
＆＃13;

8 个答案:

答案 0 :(得分：2)

你可以将它们包装在div中并像这样浮动它们：

*{
  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>

答案 1 :(得分：2)

你错了。不要漂浮它们，这不是你想要在这里实现的。

包装三个div并给出包装器align-row（请参阅.align的代码）并给父母align-table（请参阅#sections）。

如果您删除#sections的宽度，因为CSS规则table-layout: fixed;这将意味着并排元素将并排放置，这也将允许您拥有真正响应式布局自动更改宽度，不会破坏内容流。

检查fiddle 

* {
  padding: 0px;
  margin: 0px;
}
#sections {
  /*--LEFT SECTION COLUMNS--*/
  width: 1000px;
  height: 400px;
  margin: 0 auto;
  background: red;
  display: table;
  table-layout: fixed;
}
.align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
.sectionLfirst {
  width: 500px;
  background: orange;
}
.sectionLsecond {
  background: skyblue;
}
.sectionLthird {
  background: Indigo;
}
.sectionRfirst {
  /*--RIGHT SECTION COLUMNS--*/
  background: orange;
}
.sectionRsecond {
  background: skyblue;
}
.sectionRthird {
  background: Indigo;
}
<!--LEFT SECTION COLUMNS-->
<div id="sections">
  <div class="align">
    <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="align">
    <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>
</div>

答案 2 :(得分：2)

我这样做是这样的。它比较干净。

https://jsfiddle.net/zeegn9cn/13/ 

#leftSections {
    float:left;
}
#rightSections {
    float:right;
}

答案 3 :(得分：1)

如果您控制html，您可以重新排列html并将所有元素浮动到左侧。

* {
    margin: 0;
    padding: 0;
}
#sections {
    width: 1000px;
    height: 400px;
    margin: 0 auto;
    background: red;
}
#sections > div {
    float: left;
    width: 500px;
}
.sectionLfirst {
    background: orange;
}
.sectionLsecond {
    background: skyblue;
}
.sectionLthird {
    background: indigo;
}
.sectionRfirst {
    background: orange;
}
.sectionRsecond {
    background: skyblue;
}
.sectionRthird {
    background: indigo;
}
<div id="sections">
    <div class="sectionLfirst">
        <h3>fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRfirst">
        <h3>1fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLsecond">
        <h3>fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRsecond">
        <h3>2fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionLthird">
        <h3>fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
    <div class="sectionRthird">
        <h3>3fdkfjdkfj</h3>
        <p>fdlfkdlkfldkfdlkfdl</p>
    </div>
</div>

答案 4 :(得分：1)

我经常想知道如何轻松完成这项工作。我最近开始了一份新工作，发现我应该使用Bootstrap（还有其他选项）。

非常方便的是，您可以制作一行或三个大小均匀的列，例如，其他许多优秀的功能。

你可以手工完成所有这些工作，但我认为学习像Bootstrap这样的行业标准可以为你节省大量时间。我意识到这并没有直接回答你的html / css问题，但我希望有人早点告诉过我。

此处Bootstrap's主网站。

This页面将向您展示制作这些列的基础知识。

另请注意，Bootstrap非常适合制作响应式网页，这意味着它可以在不同设备尺寸上轻松为您重新调整尺寸，或者更改窗口大小。

例如，如果你想制作一个两列宽，三行高的div，你可以使用下面的html，如果使用Bootstrap。

<div class="container">
    <div class="col-xs-6">
        <h1>Section 1</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 2</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 3</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 4</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 5</h1>
    </div>
    <div class="col-xs-6">
        <h1>Section 6</h1>
    </div>
</div>

正如您所看到的，它更清洁，并且不需要您手写任何CSS。它是消除许多低级布局问题的强大工具。

答案 5 :(得分：1)

查看这个小提琴https://jsfiddle.net/zeegn9cn/14/

包裹它们并漂浮包裹并移除各个div上的花车

CSS 

    *{
  padding:0px;
  margin:0px;
}
#sections{   /*--LEFT SECTION COLUMNS--*/
  width:1000px;
  height:400px;
  margin:0 auto;
  background:red;
}

.left {
    width:500px;
    float:left;
}

.right {
    width:500px;
    float:right;
}
.sectionLfirst{
  width:500px;
  background:orange;
}
.sectionLsecond{
  width:500px;
  background:skyblue;
}
.sectionLthird{
  width:500px;
  background:Indigo;
}  
  .sectionRfirst{  /*--RIGHT SECTION COLUMNS--*/ 
  width:500px;
  background:orange;
}
.sectionRsecond{
  width:500px;
  background:skyblue;

}
.sectionRthird{
  width:500px;
  background:Indigo;
}

修改

如果您希望它响应，请在包装上放置100％的最大宽度，并使内部百分比宽度。但是我建议您通过在移动设备上使左右部分100％宽度来移动下面的列。如果没有移动https://jsfiddle.net/zeegn9cn/17/

下面的列，那么这是响应式版本的小提琴

答案 6 :(得分：1)

我不认为使用浮动是构建这样的网站的正确方法。使用display:inline-block或display:table，您可以将列保持在彼此旁边，但将它们保持在页面的中心位置：

这样，如果您做出正确的css决策，您可以在课程中具有很大的灵活性和可重用性。并且您可以在列中嵌套其他元素以形成类似于表的结构。此外，这是响应，你的div没有静态宽度/高度。

您还可以定义媒体查询，以决定屏幕尺寸过小时要执行的操作。也许，将所有列标记为display:block，以便它们占据窗口的整个宽度

见这个例子：

http://jsfiddle.net/y3uprrow/1/

答案 7 :(得分：0)

https://jsfiddle.net/zeegn9cn/15/ 

/*--ADDED--*/
#sections-inner{
    display:inline-block;
    verticle-alignment:top;
}
相关问题
最新问题