使用 CSS 将 Div 拆分为 2 列

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 的背景颜色。我从各种网站尝试过的其他代码似乎无法转换为我的结构。

感谢您的帮助！

Answer 1

纯老派 CSS

我知道这篇文章已经过时了，但如果你们中的任何人仍在寻找更简单的解决方案。

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

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

Answer 2

您可以使用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>

Answer 3

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

问题是如何使用 css 将一个 div 分成 2 列。

以上所有答案实际上都将 2 个 div 嵌入到一个 div 中以模拟 2 列。这是一个坏主意，因为您将无法以任何动态方式将内容流入 2 列。

因此，使用 CSS 定义为包含 2 列的单个 div 来代替上述方法，如下所示...

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

将上述内容作为一个类分配给一个 div，它实际上会将其内容流入 2 列。您还可以进一步定义边距之间的差距。根据 div 的内容，您可能需要弄乱分词值，这样您的内容就不会在列之间被分割。

Answer 4

将一个部分分成两列非常容易，如果你把它指定为更好的列宽（比如宽度：50%）并设置 float:left 为左列，float:right 为右列。

Answer 5

垂直分割 div 的最佳方式 --

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

Answer 6

让子 div 为 inline-block，它们将并排放置：

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

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

见Demo

Answer 7

1. 在父 DIV 中使字体大小为零。

2. 为每个子 DIV 设置宽度 %。

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }
   

*在 Safari 中，您可能需要设置 49% 才能使其正常工作。

Answer 8

浮动不会影响流程。我倾向于做的是添加一个

<p class="extro" style="clear: both">possibly some content</p>

在“包装 div”的末尾（在本例中为内容）。我可以通过说可能需要这样一段来在语义基础上证明这一点。另一种方法是使用 clearfix CSS：

#content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

cmets 的诡计在于跨浏览器兼容性。

Answer 9

最灵活的方法：

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

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

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

但没有实际添加元素。 ::after 被称为伪元素。这比将overflow:hidden; 添加到#content 更好的唯一原因是您可以让绝对定位的子元素溢出并且仍然可见。它还允许 box-shadow 仍然可见。

Answer 10

最好在这里回答Question 211383

如今，任何有自尊心的人都应该使用所述的“micro-clearfix”清除浮动的方法。

Answer 11

这对我很有用。我把屏幕分成了两半：20% 和 80%：

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

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

Answer 12

无论出于何种原因，我从不喜欢清除方法，我依靠浮点数和百分比宽度来处理此类事情。

以下是在简单情况下有效的方法：

#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

Answer 13

另一种方法是将overflow:hidden; 添加到浮动元素的父元素。

overflow:hidden 将使元素增长以适应浮动元素。

这样一来，一切都可以在 css 中完成，而不是添加另一个 html 元素。

Answer 14

当您浮动这两个 div 时，内容 div 会折叠到零高度。只需添加

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

在 #right div 之后，但在 content div 之内。这将强制内容 div 包围两个内部浮动 div。