c 生成html的div,html - 使用C将Div拆分为2列

html - 使用C将Div拆分为2列

我一直在尝试使用CSS将div拆分为两列，但我还没有设法让它工作。 我的基本结构如下：

如果我试图将右边和左边的div移动到它们各自的位置(右边和左边)，它似乎忽略了内容div的背景颜色。 我从各种网站尝试的其他代码似乎无法转换为我的结构。

谢谢你的帮助！

PF1 asked 2019-05-21T16:56:42Z

13个解决方案

68 votes

这对我有好处。 我将屏幕划分为两半：20％和80％：

#left content in here

#right content in there

Navish answered 2019-05-21T16:57:30Z

55 votes

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

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

Rob Van Dam answered 2019-05-21T16:57:02Z

47 votes

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

溢出：隐藏将使元素增长以适应浮动元素。

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

tybro0103 answered 2019-05-21T16:58:21Z

16 votes

最灵活的方法：

#content::after {

display:block;

content:"";

clear:both;

}

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

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

tybro0103 answered 2019-05-21T16:59:05Z

9 votes

无论出于何种原因，我都不喜欢清理方法，我依靠浮动和百分比宽度来做这样的事情。

这是在简单的情况下工作的东西：

#content {

overflow:auto;

width: 600px;

background: gray;

}

#left, #right {

width: 40%;

margin:5px;

padding: 1em;

background: white;

}

#left { float:left; }

#right { float:right; }

如果你把一些内容放在你身上，你会发现它有效：

some stuff

some more stuff

unas cosas

mas cosas para ti

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

answered 2019-05-21T16:59:53Z

8 votes

让孩子们分享inline-block并将他们并排排列：

#content {

width: 500px;

height: 500px;

}

#left, #right {

display: inline-block;

width: 45%;

height: 100%;

}

见演示

Oriol answered 2019-05-21T17:00:24Z

3 votes

垂直划分div的最佳方法 -

#parent {

margin: 0;

width: 100%;

}

.left {

float: left;

width: 60%;

}

.right {

overflow: hidden;

width: 40%;

}

UberNeo answered 2019-05-21T17:00:50Z

1 votes

这里最好的答案问题211383

这些天，任何自尊的人都应该使用所谓的“微清除”方法来清除花车。

Jbird answered 2019-05-21T17:01:30Z

1 votes

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

possibly some content

在'包装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;

}

/* */

评论的诡计是跨浏览器兼容性。

Gazzer answered 2019-05-21T17:02:21Z

1 votes

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

#container .left,

#container .right {

display: inline-block;

}

#container .left {

width: 20%;

float: left;

}

#container .right {

width: 80%;

float: right;

}

TheHive answered 2019-05-21T17:02:46Z

0 votes

在父DIV中使字体大小等于零。

设置每个子DIV的宽度％。

#content {

font-size: 0;

}

#content > div {

font-size: 16px;

width: 50%;

}

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

Berezh answered 2019-05-21T17:03:36Z

0 votes

将两个分区分成两列非常简单，如果你把它放宽(如宽度：50％)，只需指定列的宽度，并为左列设置float：left，为右列设置float：right。

Rashid Jorvee answered 2019-05-21T17:04:01Z

0 votes

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

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

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

因此，使用CSS来定义包含2列的单个div，而不是上述内容，如下所示...

.two-column-div {

column-count: 2;

}

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

Rodney P. Barbati answered 2019-05-21T17:04:59Z