2

画像があり、画像の下に「クリックして拡大」というテキストを追加する必要がありますが、これは CSS を使用してのみ行うことができます。

これは私がこれまでに持っているものですが、適切に配置できないようです。画像右側に浮いているように見えます。これを画像の真下と左に移動するにはどうすればよいですか?

#main_image:after{ 
content:"click image to enlarge";
text-align:left;
position:relative;
left:0;
clear:both;
margin-bottom:10px;
}
4

3 に答える 3

1

追加するだけdisplay: blockです：http://jsfiddle.net/fQyhj/4/

#main_image:after{ 
    content:"click image to enlarge";
    text-align:left;
    position:relative;
    margin-bottom:10px;
    display: block;
}

あなた#main-imageは画像自体ではなく、テキストを見ているので、それを包むラッパーだと思います。

参考までに、疑似要素は「置換された」要素では機能しません: http://www.red-team-design.com/css-generated-content-replaced-elements

于 2013-08-03T14:38:03.297 に答える
1

疑似要素を使用してキャプションを追加する 1 つの方法を次に示します。

HTMLは次のようになります。

<a class="main_image" ><img src="http://placekitten.com/300/200" /></a>

CSSは次のようになります。

.main_image {
    border: 1px solid blue;
    padding: 10px 10px 40px 10px;
    display: inline-block;
    position: relative;
}
.main_image img {
    vertical-align: top;
}
.main_image:after { 
    content: "click image to enlarge";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: beige;
    text-align: center;
}

疑似要素を<a>タグに追加し、必要に応じて配置します。

絶対配置を使用しましたが、他にもオプションがあります。

デモを参照してください: http://jsfiddle.net/audetwebdesign/fQyhj/

于 2013-08-03T14:33:06.653 に答える