Css - 图放置

Question

大家好，我是 HTML5/CSS 的新手，所以我需要一些帮助。

问题是图像不会进入框内。
它的当前位置在框的左下角。
我想将它放在框的左侧，将 h2 和 p 放在图像的右侧我只是对我所缺少的东西感到困惑

此外，如果我为每个 html 元素创建一个 id 可以吗？看起来元素太多了，这在网页设计中是不是不受欢迎？如果是这样，正确的做法是什么？

非常感谢

#featPost {
		padding:70px 0px 0px 51.2px;
	/*	background-color: orange;*/
	}
	
	#featPost section {
	width: 750px;
	height: 261px;
	border-style: double;
	border-width: 4px;
	border-color: black;
	
	}
	
	#featPost figure {
		position: relative;
		padding-right:20px;
		float:left;
		
	}
	
	#featPost h1 {
		font-family: "Calibri", Helvetica, sans-serif;
	}
	
	#featPost h2 {
		padding: 50px 0px 10px 41.5px;
		font-size: 30px;
		text-align: center;
		font-family: "Calibri", Helvetica, sans-serif;
		
	}
	
	
	#featPost section{
		border-style: double;
		border-width: 4px;
		border-color: black;
	
	}
	
	#featPost p {
		 padding-bottom: 150px;
		 font-size: 20px;
	}

<aside id="featPost"><article>
		
		<h1> Featured Post </h1>	 

		<section>
			<h2> Essay as Easy as 1,2,3 </h2>
			<figure>
			<img src="images/example.png" width="250" height="250" alt="image of an egg">
			</figure>
			<p> What? There are rules in writing an essay?? <a href="writing_art1.html" title="Read more">Read more</a></p>  
		</section>
</article></aside>
	

Answer 1

我建议将图像向左浮动。我稍微更新了你的代码:

HTML:

<aside id="featPost">
    <article>
        <h1> Featured Post </h1>    
        <section>
            <figure>
                <img src="http://placehold.it/250x250" width="250" height="250" alt="image of an egg" />
            </figure>
            <h2> Essay as Easy as 1,2,3 </h2>

            <p>What? There are rules in writing an essay?? <a href="writing_art1.html" title="Read more">Read more</a></p>
        </section>
    </article>
</aside>

CSS:

#featPost {
    padding:70px 0px 0px 51.2px;
    /*  background-color: orange;*/
}
#featPost section {
    width: 750px;
    overflow: auto;
    border: 4px double black;
}
#featPost figure {
    float:left;
}
#featPost h1 {
    font-family:"Calibri", Helvetica, sans-serif;
}
#featPost h2 {
    margin-top: 50px;
    font-size: 30px;
    text-align: center;
    font-family:"Calibri", Helvetica, sans-serif;
}

#featPost p {
    font-size: 20px;
}

DEMO