我最近尝试编写一个框,在左侧包含一个图像,在它旁边有一个标题和段落,如下所示:
http://gyazo.com/c5165fa45c32f69499768ba95d815328
这就是我所做的:
<div class="span4">
<div class="box">
<img src="img/share.png" class="image_margin"/>
<span class="box_title">SHARE</span>
<span id="texting">Upload files straight from you hard disc. Up to 600MB per file upload! the more you earn the more file storage you get.</span>
</div>
</div>
CSS:
.box {
background-image: url("../img/box.png");
width: 305px;
height: 117px;
}
#texting {
font-size: 14px;
}
.image_margin{
margin-top: 25px;
margin-left: 25px;
}
.box_title{
font-size: 24px;
color: #8d8d8d;
margin-left: 15px;
margin-top: 20px;
position: absolute;
}
这是结果:
http://gyazo.com/f600c42f86b51e52de436631fc96656d
为什么文本开箱即用,却在盒子的类中?我做错了什么?如何像 CSS 中的第一张图片一样对齐标题 + 段落,使其适合所有屏幕?
十分感谢!