一个 DIV 显示为两列答案

【问题标题】：One DIV displayed as two columns一个 DIV 显示为两列
【发布时间】：2015-06-04 12:30:53
【问题描述】：

我正在修改基于 Bootstrap 构建的 WordPress 主题，并且希望将出现在 one div 中的内容分布在两个等高的列中。这可以通过 Bootstrap 框架或 CSS 轻松完成吗？谢谢。

【问题讨论】：

【解决方案1】：

这是唯一可用的 bootstrap 解决方案：

<div class="row">
  <div class="col-md-6 col-xs-6 col-lg-6 lol1">somethink</div>
  <div class="col-md-6 col-xs-6 col-lg-6 lol2">somethink</div>
</div>

如果您的div 的内容是您无法在两列中显示此内容的文本，则您必须在此容器内使用其他div's。

【讨论】：

感谢您的回复。好的，所以没有办法让一个div 的内容分布在两列中？基本上我希望能够让我的客户通过 WordPress 更新他们的详细信息，并且他们输入的任何内容都将始终跨越两个等高的列。您提出的解决方案需要在两个divs 之间手动处理内容，直到它们的高度相等，对吧？
无论屏幕分辨率如何，这将出现在两列中的任何内容，一个文本到另一个文本

【解决方案2】：

您可以做的是使用一些新的 CSS3 元素。

请注意，这仅适用于最新的浏览器，并且在大多数情况下需要浏览器前缀

div {
  -webkit-column-count: 2;/* Chrome, Safari, Opera */
  -moz-column-count: 2;/* Firefox */
  column-count: 2;
}

<div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

如您所见，您必须为webkit 和moz 调用浏览器特定的调用。关于设置宽度和其他此类信息有很多额外的功能，因此阅读一些有关它的文档将很有用。

下面是几个关于如何使用以及在哪里支持的链接

阅读更多：MDN

浏览器支持：Caniuse

【讨论】：

很高兴知道@Stewartside！非常感谢:-)