Question

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

我无法在Windows 8中的IE 10，Firefox，Opera和Chrome中使用它。

我搜索过但找不到关于这个主题的任何内容。我该怎么办？

Kinde问候

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;}

Answer 1

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

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

此：

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

列似乎与我很好地对齐：）

编辑：我还将图片更深入地移动到段落中以查看它是否仍然在那里看起来不错。它确实

编辑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;
}

Answer 2

我看过你的小提琴，对我来说，在Chrome中添加图片没什么区别。

这个问题是由第一段推文降低的边际引起的，但是由于边距与CSS3列一起工作，列的后续边距不会从容器顶部推下它们而是添加它们之间的间距。它确实有意义 - 因为内容现在是'列流'的一部分，而不是'块'流。

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

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

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

Answer 3

试试这个：

[Demo]

在此我刚删除了p标签。

CSS 3：在列计数中使用图像时，列的顶部不再对齐

3 个答案: