0

I am using CSS3 column-count. When I insert a image into the column text, the top of the columns no longer align.

I cannot make it work in IE 10, Firefox, Opera and Chrome in Windows 8.

I have searched but could not find anything on the subject. What can I do?

Kinde Regards

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

3 回答 3

1

我已经更新了你的小提琴。我的更改包括添加：

.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;
}
于 2013-06-25T09:41:50.900 回答
1

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

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

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

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

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

于 2013-06-25T09:46:34.683 回答
0

试试这个：

[Demo]

在这个我刚刚删除了 p 标签。

于 2013-06-25T09:58:38.230 回答