如何在文本换行时在图像下方保留填充

Question

.blogimgarea
{
width: 38%;
padding-right: 26px;
float:left;
}
img{max-width:100%}
.blogtextarea
{
	width:55%;
	padding:22px 32px 0 0;
	float:right;
}

<div class="newpostregion pt70">
	<div class="blogimgarea">
		<img class="featblogimg" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Keeptidy_ask.png" title="In The News">
	</div>
	<div class="blogtextarea">
		<div class="titlelineblog">In The News</div>
		<div class="metalineblog">
			By sitemanager  |  Friday, Feb 12, 2016  |  0 Comments
		</div>
		<div class="contentblog">
		<div class="domore">
			<h2>Our Plastic Surgeon In the News</h2>
			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et viverra nisl. Nullam lorem tellus, eleifend eu dolor ut, consectetur venenatis velit. Mauris vestibulum sapien ac neque rutrum aliquam. Curabitur diam eros, luctus ac mattis eu, lacinia in turpis. Etiam sed commodo risus. Phasellus odio augue, mollis vel risus nec, vulputate maximus tellus. Duis accumsan, neque at egestas vestibulum, nisi sem ornare tortor, nec consequat lacus sem vitae lectus. Cras ac nibh et velit porttitor placerat eget nec mauris. Vivamus ut lacus non lorem volutpat euismod sit amet ac neque. Pellentesque imperdiet semper ligula, ac pharetra est pretium at. Quisque et venenatis ligula, in eleifend mi.
			Vivamus placerat metus a neque placerat, tincidunt tincidunt magna lacinia. Morbi eget orci arcu. Suspendisse tristique nibh velit, non volutpat dui aliquet at. Cras lacinia nibh sed leo viverra condimentum. In et quam mattis, eleifend ipsum nec, facilisis felis. Vivamus suscipit arcu ut magna laoreet convallis. Morbi suscipit semper magna in dignissim. Vivamus cursus erat sed nulla dictum malesuada at eget ex. Curabitur cursus tincidunt nisl. Praesent in viverra nibh. Donec congue est nulla, nec interdum purus ullamcorper quis. 
		</div>
		</div>
		
	</div>
	<div class="clear"></div>
</div>
	

我正在尝试解析如下所示的 html 结构：

http://puu.sh/n5lSB/13745d19f0.png

我精通 html 和 jquery，但我无法弄清楚如何在图像的左下角留下这个空白区域，如下所示：

http://puu.sh/n5lQ3/f4547056d2.png

我可以轻松地做更少/更多的基于 JavaScript 的代码，但想不出离开图像下方空白区域的方法。任何指向/建议都会非常有帮助，因为我花了相当多的时间，但都是徒劳的，因为它看起来更容易，但它有点挑战性。

Answer 1

如果图像是float:left的，并且它位于段落之前，您可以向段落添加填充或边距，图像只会将文本进一步推入。

img {
  float: left;
  padding-right: 10px;
}
img+p {
  padding-left: 50px;
}

斯菲德尔

如果图像浮动且位于段落内，则需要为其分配负边距：

.indent {
  padding-left: 50px;
}
.indent img {
  float: left;
  margin-left: -50px;
  padding-right: 10px;
}

斯菲德尔