如何縮進環繞浮動圖像的段落？

我想創建一個問題和答案頁面，並帶有縮進的答案。我有一個圖像浮動在頁面頂部的左側。我想這樣做是： Indented Answers 如何縮進環繞浮動圖像的段落？

這是到目前爲止我的HTML：

<h2 align="center">Candidate Questionnaire</h2> 
 
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/161/attachments/original/1453726298/Anthony_Boatman_Square.jpg?1453726298"> 
 
    <img style="float: left; border: 1px solid black; margin-top: 1px; margin-bottom: 1px; margin-left: 6px; margin-right: 6px;" src="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/161/attachments/original/1453726298/Anthony_Boatman_Square.jpg?1453726298" 
 
    alt="Anthony Boatman" width="150" height="150" /> 
 
</a> 
 
<h3>Anthony Boatman</h3> 
 
<h4>Why do you want to serve on the Board of Directors for the RPFC?</h4> 
 
<p style="margin-left: 25px">I believe that food is becoming more and more a major concern. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text. Here is some more sample text.</p>

但段落的左邊緣位於頁面的左邊，而不是圖像的右邊緣。如果我縮進超過圖像的寬度，那麼段落將不能正確包裝。有沒有辦法縮小整個段落與圖像和頁面相關的縮進？我想在樣式表中創建一個帶有縮進的段落類p.answers。

來源

2016-01-25 Adam Schwartz

你可以將你的問題答案包裝在一個div中並應用下面的CSS。

.answers { 
    width: 500px; 
    float: left; 
}

請參考以下Jsfidle。

https://jsfiddle.net/Rukhsana/fek24ag1/

來源

2016-01-25 14:17:24

Rukhasana Mulani，感謝您抽出寶貴時間回答我的問題。我看着你的jsfiddle，結果並不是我正在尋找的。我試圖縮小與問題有關的整個回答段落，並且都包裹了照片。 –

我已經創建了一個新的jsfiddle，它可以完成我想要的大部分任務。問題在於對照片右側的回答沒有縮進，因爲縮進是從左頁邊距開始測量的，而不是照片。 https://jsfiddle.net/swordams/ffuttmu4/1/ –

將padding加上段落。

p{ 
    padding-left: 140px; 
}

這將是容易的，如果不是內嵌式使用head標籤嵌入風格之間以下CSS編輯：

img { 
    float: left; 
    border: 1px solid black; 
    margin-top: 1px; 
    margin-bottom: 1px; 
    margin-left: 6px; 
    margin-right: 6px; 
    } 

p { 
    padding-left: 140px; 
}

來源

2016-01-25 14:18:33

如何縮進環繞浮動圖像的段落？

回答

相關問題