CSS 3：在 Column-count 中使用图像时，列的顶部不再对齐答案

【问题标题】：CSS 3: When using image in Column-count the top of the columns no longer alignCSS 3：在 Column-count 中使用图像时，列的顶部不再对齐
【发布时间】：2013-06-25 17:58:38
【问题描述】：

我正在使用 CSS3 列数。当我在列文本中插入图像时，列的顶部不再对齐。

我无法让它在 Windows 8 的 IE 10、Firefox、Opera 和 Chrome 中运行。

我已搜索但找不到有关该主题的任何内容。我能做什么？

亲切的问候

http://jsfiddle.net/lassebjensen/KeWX8/

HTML：

<div class="two-columns-article">

    <p>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh sapien, adipiscing non arcu vel, pulvinar pretium mi. Proin porta, lectus id bibendum condimentum, magna massa tincidunt lorem, non dictum justo leo at purus. Morbi ultricies cursus diam ac pretium. Curabitur auctor, justo sit amet volutpat auctor, mauris tortor vehicula urna, in dignissim enim sapien eu tortor. Donec tincidunt mauris purus, vel volutpat nibh convallis at. Pellentesque condimentum nec purus eu rutrum. Duis elementum faucibus ante eget imperdiet. Aenean lacinia mauris et blandit hendrerit. Vivamus arcu risus, tincidunt non sapien sit amet, tempor laoreet mi. Sed at imperdiet mi, in ornare nibh. Pellentesque a laoreet orci, posuere volutpat diam. Aenean auctor odio sed vulputate condimentum. Vestibulum eu nibh nec lacus mollis placerat. Suspendisse suscipit ut lacus ornare eleifend. Sed faucibus velit id nulla vestibulum, quis suscipit augue eleifend.

    </p>

    <p>

<img   src="http://captainkimo.com/wp-content/uploads/2012/07/Common-Tiger-Butterfly-on-Yellow-Flower-in-Phuket-Thailand.jpg" >        Donec rutrum mauris quis faucibus consequat. Praesent pulvinar commodo facilisis. Duis id eros id sapien mattis vestibulum quis nec est. Sed eleifend feugiat vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac hendrerit est. In a purus velit. Aliquam a diam placerat, dignissim ipsum ut, viverra lorem. Donec ut egestas justo, in aliquam dolor. Sed a malesuada mi. Integer nec fringilla justo. In at laoreet mauris. Proin adipiscing mollis ullamcorper.


    </p>


</div>

CSS：

.two-columns-article{
    -webkit-column-count: 2;
    -webkit-column-gap: 34px; 
    -webkit-column-rule: 1px dotted #d5d5d5;
    -moz-column-count: 2;
    -moz-column-gap: 34px;  
    -moz-column-rule: 1px dotted #d5d5d5;
    column-count: 2;
    column-gap: 34px; 
    column-rule: 1px dotted #d5d5d5;
}


img{ width:300px; float:right;}

【问题讨论】：

标签： html css column-count

【解决方案1】：

我已更新您的fiddle。我的更改包括添加：

.two-columns-article p { margin:20px 0; }
.two-columns-article > p:first-child { margin-top:0; }
img{ display:block; width:300px; }

这个：

将段落的边距设置为 y 方向上的 20 像素
删除第一段的任何上边距
移除图片上的浮动，并将其设置为块状。

这些列似乎与我很好地对齐:)

编辑：我还把图片移到了段落的更深处，看看它在那里看起来是否还可以。会的

编辑 2：我认为它的样式看起来很不错

.two-columns-article > p { 
    margin:20px 0;
    text-align:justify;
}
.two-columns-article > p:first-child { margin-top:0; }
.two-columns-article img { 
    display:block; 
    width:100%;
    margin:10px 0;
}

【讨论】：

【解决方案2】：

我看过你的小提琴，对我来说，在 Chrome 中添加图像没有任何区别。

问题是由第一段的边距将文本向下推引起的，但由于边距与 CSS3 列一起使用的方式，列上的后续边距不会将它们从容器顶部向下推，而是添加它们之间的间距。这确实有意义 - 因为内容现在是“列流”而不是“块”流的一部分。

解决您的问题的简单方法是：

.two-columns-article p:first-child {
    margin-top: 0;
}

http://jsfiddle.net/KeWX8/1/

【讨论】：

【解决方案3】：

试试这个：

[Demo]

在此我刚刚删除了 p 标签。

【讨论】：