0

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

3 に答える 3

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 に答える