一个DIV显示为两列

我在修改基于Bootstrap构建的WordPress主题，并希望获得将出现在一个div的内容分布在两个偶数高度的列上。这可以通过Bootstrap框架或CSS轻松完成吗？谢谢。一个DIV显示为两列

2015-03-31 oldo.nicho

你可以做的是使用一些新的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

来源

2015-03-31 08:54:36 Stewartside

有用的信息@Stewartside！非常感谢：-） – 2015-03-31 08:56:37

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

LIVE DEMO

<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。

来源

2015-03-31 08:37:06

感谢您的答复。好的，所以没有办法让一个'div'的内容分布在两列上？基本上，我希望能够让我的客户通过WordPress更新他们的详细信息，而且他们输入的任何内容都会跨越两个甚至更高的列。你提出的解决方案需要在两个'div's手动调整内容，直到它们的高度相等，对吧？ – 2015-03-31 08:41:02

没有任何内容，这将出现在两列一个文本到另一个无论屏幕分辨率 – 2015-03-31 08:44:29

好吧，欢呼的帮助@Ze – 2015-03-31 08:57:29

一个DIV显示为两列

回答

相关问题