我如何缩进环绕浮动图像的段落？

Question

我正在尝试创建带有缩进答案的问答页面。我的图像浮动在页面顶部的左侧。我想做的是这样的：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。

Answer 1

您可以将您的问题答案包装在div中，并在CSS之后应用。

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

请参阅以下Jsfidle。

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

Answer 2

在段落中添加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;
 }

Answer 3

[经过一番尝试后，我找到了一个解决方案：为您要缩进的标签提供display: table和padding-left: 10px属性