如何使用純CSS對齊此div中的段落？

Question

JS小提琴

我有一種情況，我想在div內的文本左側浮動一個小圖像。 我不希望文字包裹在圖片下面，並且一些研究使我增加了overflow:hidden; <p>上的屬性。 雖然這使圖像旁邊的段落表現出我想要的效果，但隨后的段落與第一段不對齊。 是否有一種使所有段落對齊的好方法？ 我試過display: table-row; ，但這會影響頁面上的其他元素（我已經閱讀了為什么會這樣）。

我需要在JSFiddle中存在的約束內進行工作（即，不能真正修改html），並且跨瀏覽器支持是優先事項。

 .header { color: white; background-color: red; padding: 15px; } .header p { overflow: hidden; } .img { background-color: green; width: 45px; height: 45px; float: left; } 

 <div class="header"> <div class="img"> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum. </p> <p> Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus. </p> </div> 

Answer 1

在段落上使用margin-left作為圖像的寬度+圖像和段落之間所需的邊距/空間。 這樣就無需overflow 。

 .header { color: white; background-color: red; padding: 15px; } .header p { margin: 0 0 1em 55px; } .img { background-color: green; width: 45px; height: 45px; float: left; } 

 <div class="header"> <div class="img"> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum. </p> <p> Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus. </p> </div> 

Answer 2

因此，您應該為整個對象設置一個div，為圖像設置一個div，為文本設置一個div。

我不知道這是否是您要尋找的東西，但是您去了。

 .container { width: 400px; height: auto; } .imageDiv { max-width: 200px; height: auto; float: left; } .image { max-width: 100%; } .text { max-width: 200px; min-width: 200px; text-align: center; float: left; } 

 <div class="container"> <div class="text"> <p> Some text. </p> </div> <div class="imageDiv"> <img class="image" src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg"> </div> </div> 

Answer 3

為其他內容編碼一個div，並根據需要管理兩個div。

<div class="header">
    <div class="img">

    </div>

    <div class="other">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum. 
        </p>
        <p>
        Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
        </p>
    </div>

</div>