Div带有图像和文字样式

Question

我有一个div框，其中包含图像，标题和一些文本。它应该是左上角的图像，h1位于图像和div边缘之间的中上部，一些文本行与图像宽度一致的边距对齐，并且在h1下面

<div id="info">
<img src="images/trains.jpg"/>
<h1>News</h1>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
<p>Lorem Ipsum Dolor</p>
</div>

#info {
background-color: rgba(255,6,10,1.00);
width: 500px;
height: 300px;
border-right: solid 1px rgba(151,151,151,1.00);
}

建议？

Answer 1

浮动图像并根据需要添加边距......是单向的。

JSFiddle Demo

<强> CSS

#info {
background-color: rgba(255,6,10,1.00);
width: 500px;
border-right: solid 1px rgba(151,151,151,1.00);
}

#info h1{
    text-align: center;
}

#info img {
    float:left;
    display: block;
    padding:5px;
}

p {
    margin-left:160px;
}