使用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

这对我有好处.我将屏幕划分为两半: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 2

当你浮动这两个div时,内容div折叠到零高度.只需添加

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

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

Answer 3

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

溢出:隐藏将使元素增长以适应浮动元素.

这样,它可以在css中完成,而不是添加另一个html元素.

Answer 4

最灵活的方法:

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

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

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

但没有实际添加元素.:: after被称为伪元素.这比添加overflow:hidden;到#content 更好的唯一原因是你可以让绝对定位的子元素溢出并且仍然可见.此外,它还允许盒子阴影仍然可见.

Answer 5

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

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

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

所以，而不是上面的，使用单个 div 定义为包含使用 CSS 的 2 列，如下所示......

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

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

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

Answer 7

让孩子们成为div inline-block,他们将并排:

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

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

见演示

Answer 8

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

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

Answer 9

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

纯老式 CSS

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

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

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