0

http://judopassion.com/wordpress/

content div には、記事オブジェクトがいくつかあります。各記事には 1 つの画像があります。画像では、左下の画像に矢印を描きます。div contentArrowで実現しました。問題は、すべての画像の幅が同じで高さが異なることです。そのため、すべてのタイプの高さに対して contentArrow を修正する方法がわかりません。contentArrow は、高さ 269px の画像に対してのみ適切に表示されるようになりました。 ここに画像の説明を入力 どうすればいいですか？どうもありがとう。

4

3 に答える 3

1

#contentImageSrc.contentImageSrc複数回使用しているため、クラスである必要があります。IDを繰り返すことはできないルール

contentArrow div内部に移動しcontentImageSrc DIVて、css を次のように記述します -

.contentImageSrc{ position: relative; }
.contentArrow { position: absolute; bottom: 10px; left: 10px;}
于 2012-10-15T10:13:11.723 に答える
1

画像を相対的な位置で div にラップし、「下」の値を 0 に設定してその中に矢印を絶対に配置できます。

<div class="imageWrapper">
    <div class="contentArrow"></div>
    <img src="image.jpg" />
</div>

CSS:

.imageWrapper{position:relative}
    .contentArrow{position:absolute; background:url(arrow.png); bottom:0; left:15px}
于 2012-10-15T10:16:06.997 に答える
0

実際には、ラッパーといくつかの巧妙なCSSを使用するだけで、これらすべてを実現できます。

以下に例を示します。CSSの多くは見栄えを良くするためのものであることに注意してください。機能の実際の要点は、タグがsでIMGラップされており、タグには次のものが適用されているという事実です。SPANSPAN

span.selected:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 10px; left: 50%; 
    margin: 0 0 0 -25px;
    height: 0; width: 0;
    border: 20px solid transparent;
    border-bottom-color: #fff;
    z-index: 1;
}

このように特定のクラスの要素をスタイリングすること:afterで、矢印の白い部分を作成します。要素の追加のスタイルは:before、白い矢印の周りに黒い境界線を作成することです。

http://jsfiddle.net/TroyAlford/wRrW6/で実際の例を見ることができます。

<span><img src="http://placekitten.com/400/400" /></span>
<span class="selected"><img src="http://placekitten.com/410/410" /></span>
<span><img src="http://placekitten.com/420/420" /></span>

<style type="text/css">
img {
    border: 1px solid #333;
    color: transparent;
    display: inline-block;
    padding: 5px; margin: 5px;
    position: relative;
    width: 200px; height: 200px;
}
span { display: inline-block; }
span:hover { cursor: pointer; }
span.selected { position: relative; }
span.selected > img { background: #268; }
span.selected:before, span.selected:after {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 10px; left: 50%; 
    margin: 0 0 0 -25px;
    height: 0; width: 0;
    border: 20px solid transparent;
    border-bottom-color: #000;
    z-index: 1;
}
span.selected:after {
    bottom: 9px; left: 50%; 
    margin: 0 0 0 -25px;
    height: 0; width: 0;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}
</style>
于 2013-02-08T00:51:18.030 に答える