我希望此图像下的文本在图像下左对齐(“我的标题”与图像的左侧对齐),无论它的高度是多少,没有Javascript。
HTML
<div class="container">
<div class="img-container">
<img src="http://img.thesun.co.uk/multimedia/archive/01572/empire-state-build_1572000a.jpg"/>
<div class="info">
<h1>my title</h1>
<p> my description</p>
</div>
</div>
</div>
CSS
.container{
width:900px;
position:relative;
}
.img-container{
text-align:center;
}
img{
max-width:100%;
}
.info{
text-align:left;
}
如果您调整 .container 宽度,它应该始终与该图像的左侧对齐。
这可能只使用CSS吗?