Css - 放置

Question

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

问题是图像不会进入框内。
它的当前位置位于框的左下角 我想把它放在盒子的左侧，而h2和p放在图像的右侧 我只是坚持我所缺少的东西

另外，如果我为每个html元素创建一个id，是否可以？它看起来似乎有太多的元素，这在网页设计中是否令人不悦？如果是这样，那么正确的做法是什么？

非常感谢

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

h2和p标签自动获取全宽，这就是为什么你无法浮动图像的原因。