文字换行时如何在图片下方留下填充

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

jsfiddle

如果图片是浮动的并且在段落内，则您需要为其指定一个负边距：

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

jsfiddle