我想在调整浏览器窗口大小时得到这个:
我有这个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%; for .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>
答案 0 :(得分:1)
虽然我认为在<a>
中包含块元素符合HTML5,但这不是必需的。
CSS
a { position:relative; outline:1px dashed red; display:inline-block; width:100% }
span {
position:absolute;
bottom:0;
height:20%;
padding:5px;
background-color:#ccc;
width:100%
}
img { width:100% }
HTML
<p style="background-color:black"><!-- remove inline style in production code -->
<a href="#" class="article-link-block">
<img src="http://c69282.r82.cf3.rackcdn.com/361.jpg">
<span>Article Info need to be 20% of the height and always at the bottom</span>
</a>
</p>
小提琴:http://jsfiddle.net/9dt7w/
编辑(一张包含多篇文章的图片)。而不是使用<span>
使用列表。
<img>
<ul>
<li>article</li>
<li>article2</li>
</ul>
小提琴:http://jsfiddle.net/vtZ8g/
编辑 - 接受的答案
http://jsfiddle.net/MXXaS/
答案 1 :(得分:0)
你不应该在'a'标签中真正拥有DIV(块元素)。如果您将DIV更改为内联,我认为这可能是有效的。
为了让DIV成为其父级的20%,你需要将'a'标签设为块级元素并给它一个高度。
然后将它对齐到底部,你需要使'a'标记位置相对,并使DIV位置绝对,底值为'0'。
a.article-link-block {
display:block;
position:relative
}
.article-info {
postion:absolute;
bottom:0;
display:inline-block;
}
}