将div并排堆叠

Question

将div并排堆叠

3

我想把这些div并排放置 - 左右两侧。右边的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>

- Chris Brennan

你想要模仿那个链接的哪一部分？整个网站吗？ - Abdul Ahmad

1

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

当您进入网站时，请单击右上角的x。有一个标题，文本对齐的部分，然后下面显示一个表格。您可以像按钮一样滚动它们。我正在尝试使用div来模拟这个效果。 - Chris Brennan

8个回答

2

如果您控制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>

- coderfin

2

你做错了，不要使用浮动，这并不是你想要实现的效果。

将三个

标签包裹起来，并给包裹元素添加“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>

- user4563161

1

为什么在 div 上使用表格对齐而不是浮动它们？就响应性而言，如果您希望实现这种效果，可以将它们设置为 50% 的宽度，将包装器设置为 100% 的宽度，但是对于移动设备，您可能希望将右侧列移到下方，在这种情况下，表格布局会很麻烦。 - Zach

3

@Zach，浮动并不是一个好的解决方案。由于在SO上有意见分歧的辩论，我不会深入探讨它的利弊。但基本上，当你想要移动像图像这样的东西并打破文档流以使文本可以环绕时，使用浮动是合适的。这不会打乱文档流和损坏包装器的高度。浮动并不是用于定位元素的。它是一条被滥用和误用的规则。 - user4563161

1

仅出于好奇，左右div使用display:inline-block怎么样？那也可以。我只是认为除了包装器高度问题外，它在最终上与浮动没有什么不同，但这很容易通过底部的清除来解决。我只是讨厌表格布局的不灵活性，特别是在移动设备上。 - Zach

1

@ Zach 显示inline-block的两个主要原因。显示inline-block不是设计为让元素并排，而是希望它们之间有间隔。此外，您再次需要设置其宽度。此外，在CSS表中没有不灵活的地方，您很可能只是不知道如何使用它们。CSS表比任何其他CSS规则（flex-box和列除外，因为它们在桌面浏览器上缺乏支持）提供更多的移动灵活性，因为您可以随意重新排列它们，例如，当进入移动设备时，您可以将最左侧的元素（自然位于顶部）移到底部。 - user4563161

@DCdaz 如果我想像我在这里尝试的那样给它加上边框样式怎么办。这太可怕了---> https://jsfiddle.net/3bmbxcvb/ 使用display table - 你给我的代码实现了这个效果，我使用了浮动和没有显示表格 --> https://jsfiddle.net/06guryqo/ - Chris Brennan

@ChrisBrennan 你好 Chris，你的 HTML 弄错了，你缺少了一个结束 div 标签，请看这里 https://jsfiddle.net/3bmbxcvb/2/。 - user4563161

2

我会这样做，更加简洁。请参考以下链接：

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

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

- KidBilly

1

我认为使用浮动布局并不适合构建这样的网站。可以使用display:inline-block或display:table，这样可以使列保持在一起，但仍然居中于页面：

通过正确的CSS选择，您可以获得很多灵活性和可重用性，并且可以在列内嵌套其他元素以创建类似表格的结构。此外，这是响应式的，在您的

上没有静态宽度/高度。

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

请参见此示例：

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

- Abdul Ahmad

同意。浮点数与此用途相去甚远。 - user4563161

1

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

它确实方便，可以让您轻松制作一行或三个大小均匀的列，以及许多其他优秀的功能。

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

这是Bootstrap的主要网站。

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

此外，请注意，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。这是一个强大的工具，可以消除许多低级布局问题。

- Dan

这不是一个答案，Bootstrap是一个包含CSS的框架，它并不是解决这个问题的方案。 - user4563161

Bootstrap对于简单的解决方案来说有点过头了。 - OzzyTheGiant

你说得对，这不是一个直接的解决方案，我在我的答案中也提到了。如果他真正感兴趣的是获得他想要的结果，而不是知道如何使用裸露的html和css来实现它，那么这是一种替代方法。我只是提供了我认为有帮助的替代方案。我同意bootstrap可能过于复杂，但它使得像OP链接的示例那样获得非常好的结果变得更加合理。我保证那个页面不是用纯html和css编写的。正如我所说，这不是一个直接的解决方案，但我希望有人在多年前告诉我关于bootstrap的事情。 - Dan

我既不是在批评也不是在请求澄清。我提出了一个解决方案，这个解决方案不是他们正在考虑的解决方案，并且没有完全列举出来。我同意我并没有完全回答楼主的问题。 - Dan

更新为实际示例HTML。我仍然认为建议一种有用的技术来简化问题是有效的。 - Dan

1

看看这个 fiddle 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/

- Zach

0

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

/*--ADDED--*/
#sections-inner{
    display:inline-block;
    verticle-alignment:top;
}

- wishab

我需要更多地使用inline-blocks。我很少用它们，还是个初学者。谢谢。 - Chris Brennan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- indubitablee · Accepted Answer

您可以将它们用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>