使用列数控制分布答案

【问题标题】：Controlling Distribution w/ Column Count使用列数控制分布
【发布时间】：2011-12-01 05:05:09
【问题描述】：

问题：http://www.offprint.am/0811861538/

有没有办法防止单个 p /p 中包含的内容在列之间拆分？将其包含在 div 中并为其赋予 height 属性似乎可行，但我正在寻找更通用/而不是逐个条目的东西。

理想情况下，除非有大量文本 (http://www.offprint.am/wp/3836516861/)，否则我希望描述位于左侧，信息位于右侧。我可以在列容器外使用两个 div（float:left）来做到这一点，但我很难让它们居中。

后者（带 div）将是首选解决方案，但我会立即寻求任何帮助。

旁白：

.entry 是带有 column-count 等的主容器。对于浮动工作，我制作了两个容器（.desc 和 .info）显示：块； float:left 并从 .entry (.desc padding-right:30px; border-right: 1px dashed #eee; / .info padding-left: 30px;) 借用了边框/间距属性

虽然它在很大程度上做到了我想要的，但它根本不会居中。

【问题讨论】：

标签： html css css-float center

【解决方案1】：

从.entry 中删除以下内容：

-moz-column-count: 2;
-moz-column-gap: 60px;
-moz-column-rule: 1px dashed #EEEEEE;

加加overflow: hidden;

然后将.entry p修改为：

.entry p {
    border-right: 1px dashed #EEEEEE;
    float: left;
    margin: 0 30px 15px 0;
    padding-right: 30px;
    width: 395px;
}

还添加以下内容：

.entry .info { float: left; width: 300px; }

【讨论】：