我想在调整浏览器窗口大小时得到这个:
我有这个 HTML:
<a class="article-link-block" href="#">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<div class="article-info">
Article Info need to be 20% of the height and always at the bottom
</div>
</a>
我可以得到所有东西,但不能得到文章信息高度的 20%。
我只能将它设为 50px 高度,然后 margin-top: -50px 就可以了,对于最大宽度。但是当我开始减小浏览器的宽度时,它不会只改变高度,而是宽度,即 100%。
任何建议/技术如何动态调整高度并始终保持在底部?
如果我使用 margin-top: -20%; 高度:20%;对于 .article-info
它创建了类似的东西:
但这当然是错误的。
顺便提一句。CSS是
.article-link-block {
display: block;
float: left;
width: 100%;
position: relative;
height: auto;
}
.article-link-block img {
margin: 0px;
padding: 0px;
display: block;
float: left;
}
.article-info {
background: black;
width: 100%;
height: auto;
float: left;
position: relative;
display: block;
margin-top: -20%;
height: 20%;
}
编辑 编辑 编辑
<body>
<div id="header">
<!-- header is 100% width of body width-->
</div>
<div id="content">
<!-- container is 100% of body width -->
<div id="articles">
<!-- articles are 70% of container width-->
<a class="article-link-block article-1" href="#">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<div class="article-info">
Article Info need to be 20% of the height and always at the bottom
</div>
</a>
<a class="article-link-block article-2" href="#">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<div class="article-info">
Article Info need to be 20% of the height and always at the bottom
</div>
</a>
<a class="article-link-block article-3" href="#">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<div class="article-info">
Article Info need to be 20% of the height and always at the bottom
</div>
</a>
<a class="article-link-block article-4" href="#">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<div class="article-info">
Article Info need to be 20% of the height and always at the bottom
</div>
</a>
</div>
<div id="sidebar">
<!-- sidebar is 30% of container width -->
</div>
</div>
<div id="footer">
<!-- footer is 100% of body width -->
</div>
</body>