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％ではなく、すべてを取得できます。

たとえば、高さ50ピクセル、次にマージントップ：-50ピクセルしか作成できません。最大幅であれば、問題ありません。しかし、ブラウザの幅を減らし始めると、高さは変更されず、幅だけが変更されます。これは100％です。

高さのサイズを動的に変更し、常に下部にとどまるにはどうすればよいですか？

マージントップを使用する場合：-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

ブロック要素をでラップすること<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/

編集（複数の記事を含む1つの写真）。使用する代わりに<span>リストを使用してください。

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

そのためのフィドル：http：//jsfiddle.net/vtZ8g/

編集-承認された回答
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 に答える