我如何将标题和文本放在我的img旁边?



我想添加4个图像到博客(2列,每个有2个图像与它的标题和描述)我的网站想把它的标题和段落在它的右侧,我怎么能做到这一点?下面是我的CSS和HTML代码:

<section id="part2">
<div class="container">
<h1>Blog</h1>
<div class="box">
<img src="images/img1-service.jpg" width='255' height="175"/>
<h3>10 RULES TO BUILD A WILDLY</br> SUCCESSFUL BUSINESS</h3>
<p>You can edit all of this text and</br> replace it with anything you have</br> to say on your blog.</p>
</div>
<div class="box">
<img src="images/img2-service.jpg" width='255' height="175"/>
<h3>9 STEPS TO STARTING A</br> BUSINESS</h3>
<p>This is a generic blog article you</br> can use for adding blog content /</br> subjects on your website.</p>
</div>
</div>
</section>

应该有4张照片,我还没有添加我的css:

body{
margin: 0;
padding: 0;
}
.container{
margin:auto;
overflow:hidden;
}
#part2 h1{
text-align:center;
font-size:250%;
}
.box{
display: inline;
text-align:center;
float:left;
padding:10px;
width:30%;
width: 33.3%;
}

如果你想在图像周围环绕文本,请为图像添加float

img{
float: left;
{

为image添加一个类,以避免与其他图像冲突

最新更新