0

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

在此处输入图像描述

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

2 回答 2

1

Although I believe wrapping a block-element in an <a> is HTML5 compliant, it's not necessary.

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>

Fiddle:   http://jsfiddle.net/9dt7w/

EDIT (one picture with multiple articles). Instead of using a <span> use a list.

<img>
<ul>
  <li>article</li>
  <li>article2</li>
</ul>

Fiddle for that one: http://jsfiddle.net/vtZ8g/

EDIT - Accepted Answer
http://jsfiddle.net/MXXaS/

于 2012-12-18T17:00:11.383 回答
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;
}

}

于 2012-12-18T16:12:27.230 回答