另一个div内的流体div
在调整浏览器窗口大小时，我希望得到这样的结果：
我有一个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%的高度作为文章的信息。
我只能使它，例如50 is的高度，然后边缘顶部：-50 is，它是可以的，为最大宽度。但是当我开始缩小浏览器的宽度时，它不会只改变宽度，即100%的宽度。
任何建议/技巧，我如何能动态调整高度，并始终保持在底部？
如果我使用边距-顶部：-20%；高度: 20%；
它创造了这样的东西：
当然，这是错误的。
顺便说一句。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>回答 2
Stack Overflow用户
发布于 2012-12-18 17:00:11
虽然我认为在<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/
Stack Overflow用户
发布于 2012-12-18 16:12:27
您实际上不应该在'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;
}}
https://stackoverflow.com/questions/13936973
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号