Question

我想在调整浏览器窗口大小时得到这个：

enter image description here

我有这个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

它创造了类似的东西：

enter image description here 但当然这是错误的。

顺便说一下。 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>

Answer 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/

Answer 2

你不应该在'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;
}

}

另一个div里面的流体div

2 个答案: