使用CSS将Div分割成两列

Question

我一直试图使用CSS将一个div分成两列，但我还没有成功。我的基本结构如下：

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

如果我尝试将左右两个div浮动到各自的位置（右和左），它似乎会忽略内容div的背景颜色。而从各种网站尝试的其他代码似乎无法转换为我的结构。

感谢任何帮助！

- PF1

---

有很多解决方案，你可以在这里看到：https://dev59.com/CnVC5IYBdhLWcg3wsTZi - enmaai

Answer 1

这个方法适合我。我将屏幕分成了两半，比例为20％和80％：

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

- Navish

---

如果您只做这个，这些元素的父元素将没有高度。 - tybro0103

简单而有效。谢谢！ - Alexis Gamarra

喜欢它。简单的解决方案。 - coder_3476

Answer 2

当你将那两个 div 浮动起来时，内容 div 就会塌陷为零高度。只需要添加

<br style="clear:both;"/>

#right div后面，但在content div内部。这将强制content div环绕两个内部浮动div。

- Rob Van Dam

---

很遗憾这篇帖子被点赞了这么多次。你应该尽量避免使用不必要的标记，特别是考虑到其他可行且广泛使用的解决方法。 - Jbird

Answer 3

另一种方法是在漂浮元素的父元素中添加 overflow:hidden;。

overflow:hidden 会使元素扩展以适应浮动元素。

这种方法可以完全使用 CSS 实现，而无需添加其他 HTML 元素。

- tybro0103

---

我鼓励读者也查看我的其他回答。我认为它实际上比这个更好。 - tybro0103

另外需要注意的是，overflow:auto; 有时可能是更好的选择。 - tybro0103

这绝对是一种有效的方法。然而，值得一提的是，这可能会带来一些明显的布局挑战。例如，如果我想让父元素的溢出内容可见。 - Jbird

Answer 4

给出的答案都没有回答原问题。

问题是如何使用CSS将一个div分成两栏。

上面所有的答案实际上是将2个div嵌入到一个div中，以模拟2个栏目。这是一个不好的主意，因为你无法以任何动态方式流动内容到这2个栏目中。

因此，不要使用上述方法，而是使用一个单一的div，使用以下CSS定义2个栏...

.two-column-div {
 column-count: 2;
}

将上述内容分配为一个类并应用到一个div中，它将实际将其内容流入2列。您还可以定义边距之间的间隔。根据div的内容，您可能需要调整单词换行值，以便内容不会在列之间被截断。

- Rodney P. Barbati

Answer 5

最灵活的方法是：

#content::after {
  display:block;
  content:"";
  clear:both;
}

这与将元素附加到 #content 的方式完全相同：

<br style="clear:both;"/>

但是不实际添加一个元素。 ::after 被称为伪元素。它比将 overflow:hidden; 应用于 #content 更好的原因是您可以让绝对定位的子元素溢出并仍然可见。此外，它将允许 box-shadow 仍然可见。

- tybro0103

---

另外一个很好的解决方案，但值得在这里提到的是，它在IE8中不起作用。我真的很痛苦成为那个说出这话的人，对于成为“那个人”我深感抱歉。 - Jbird

@Jbird 尝试使用 #content:after（只用一个冒号而不是两个）...如果我没记错的话，伪元素使用两个冒号更为规范，但旧版IE只能识别一个冒号。...或者类似这样的东西 - 我已经很久没有处理这个问题了。 - tybro0103

Answer 6

出于某种原因，我从来不喜欢清除浮动的方法，我依赖于浮动和百分比宽度来处理这类问题。

以下是在简单情况下可行的方法：

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

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

如果您输入一些内容，您会发现它可以工作：

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

你可以在这里看到它：http://cssdesk.com/d64uy。

- user18015

Answer 7

使子div变成inline-block，它们就会并排放置：

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

请查看演示。

- Oriol

---

我也更喜欢这种方法而不是float。有时候需要在左右两个元素上设置vertical-align: top;（或bottom等），如果它们的大小不同。 - james

Answer 8

您可以使用flexbox来控制div元素的布局：

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

- Mohammad Usman

---

在无数类似的尝试中，我发现这个（到目前为止）是最好的。其他我发现的（并尝试过的）都会让内容溢出。非常感谢。 - Love Putin Not War

Answer 9

如何在垂直方向上分割一个div --

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

- UberNeo

Answer 10

纯旧学派CSS

我知道这篇文章已经有些年头了，但如果你们中还有人在寻找更简单的解决方案。

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

- Dexter