5

コミックのローカル コレクション用の WEB インターフェイスを作成しようとしています。ルックアンドフィールは、Apple の iBooks と非常に似ているはずです。ブックカバーが本棚に置かれています。カバーは似ていますが、高さと幅が同じではありません。含まれている div の幅を示さずに、画像カバーを div の下部にプッシュする方法がわかりません。絶対内部相対を使用すると、カバーを山に積み重ねるだけです。

HTML:

<div class="cover"><a href="#"><img src="cover1.jpg"></a></div>
<div class="cover"><a href="#"><img src="cover2.jpg"></a></div>
<div class="cover"><a href="#"><img src="cover3.jpg"></a></div>

CSS:

body {background-image: url(http://image.bayimg.com/oaddpaaea.jpg); background-repeat: repeat;}
.cover {float: left; height: 258px; border: 1px solid red; margin: 0px 5px 25px 5px;}
.cover img {border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;}

jsFiddle の例: http://jsfiddle.net/NATqD/

4

3 に答える 3

4

この CSS を試してください:

.cover {  float: left; height: 258px;line-height: 258px;  border: 1px solid red; margin: 0px 5px 25px 5px;}
.cover img {vertical-align: bottom; border: 1px solid green; -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black;}

line-height: 258pxカバー div の高さに合わせて追加します。それからvertical-align: bottom画像について。作業例:

http://jsfiddle.net/NATqD/6/

于 2012-09-25T02:07:29.200 に答える
1

これは私にとって最も簡単なようです：

<div class="cover">
    <a href="#"><img src="http://www.emeraldinsight.com/fig/53_10_1108_S0731-9053_2009_0000024005.png"></a>
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404130.jpg"></a>
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00624371.jpg"></a>
    <a href="#"><img src="http://www.lauren-myers.com/_img/right_arrow.jpg"></a>
    <a href="#"><img src="http://www.gotohoroscope.com/img/bg_00.gif"></a>
    <a href="#"><img src="http://roborfid.dyndns.org/data/book_images/backs_small/SIWE_R_GM00404091.jpg"></a>
    <a href="#"><img src="http://www.startplay.co.uk/images/play.png"></a>
    <a href="#"><img src="https://www.educorporatebridge.com/old_back_up_16-07-12/images/foundcourses.png"></a>
    <a href="#"><img src="http://s1.hao123.com/index/images/temple_bg.gif"></a>
</div>

.cover {
    line-height: 258px;
    height: 258px; 
    border: 1px solid red; 
    margin: 0px 5px 25px 5px;
}

http://jsfiddle.net/NATqD/5/

Firefox と Chrome で動作します。

于 2012-09-25T02:09:40.330 に答える
0

position: relative を .cover に追加します。これにより、position: absolute を画像に追加できるため、画像を div に対して絶対的に相対的に配置できます。

http://jsfiddle.net/NATqD/1/

于 2012-09-25T01:58:05.770 に答える