4

floatの代わりにdisplay：inline-blockを使用してレイアウトしようとしているサムネイルギャラリーがあるので、：after pseudoを使用してattr（）を介してキャプションを含めることができます。レイアウトは機能しますが、：after「object」はその「下」のアイテムとオーバーラップします。

これが私のHTMLです：

<div id="bg">
    <div class="thumbs">
        <a href="img.png" style="background-image:url('img.png')" title="This is the outside of the house." /></a>
        <a href="img.png" style="background-image:url('img.png')" title="This is another example of a description. This is another example of a description. This is another example of a description. This is another example of a description." /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Here is yet another description." /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
    </div>

これが私のCSSです：

.thumbs a{
width:120px;
height:120px;
display:inline-block;
border:7px solid #303030;
box-shadow:0 1px 3px rgba(0,0,0,0.5);
border-radius:4px;
margin: 6px 6px 40px;
position:relative;
text-decoration:none;

background-position:center center;
background-repeat: no-repeat;

background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;

vertical-align:top;
}

.thumbs a:after{
background-color: #303030;
border-radius: 7px;
bottom: -136px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
content: attr(title);
display: inline-block;
font-size: 10px;
max-width: 90px;
overflow: auto;
padding: 2px 10px;
position: relative;
text-align: center;
white-space: no-wrap;
}

これが例を示すフィドルです：http：//jsfiddle.net/befxe/9/

ご覧のとおり、2番目の説明はその下にあるサムネイルと重なっています。：afterコンテンツのサイズに応じて、2番目の行を（画面の下部に向かって）自動的に「プッシュ」することは可能ですか？「.thumbsa」と「.thumbsa：after」の両方をさまざまな表示タイプ（インラインブロック、ブロックなど）に設定し、位置を無効に変更してみました。また、「a」全体をdivでラップし、divの表示タイプを変更しようとしましたが、それも機能しませんでした。

：beforeや：afterのような疑似要素は、このようなマイナーなコンテンツの追加を処理するための優れた方法のように見えますが、レイアウトに関するそれらの機能は、他のDOMオブジェクトのように「機能」しないように見えるため、本当に混乱します。（そして、正当な理由で、それらは実際にはDOMオブジェクトではないので、私は推測します。：P）

助言がありますか？

4

1 に答える 1

2

上記のように：

疑似要素であることとは何の関係もありません。あなたはその配置をいじくりまわしました、他の要素はあなたが提供したスタイルで同じことをするでしょう。画像が純粋に装飾的でない限り（キャプション/説明があるという事実は明らかに装飾的ではないことを意味します）、背景プロパティの代わりに画像要素を使用する必要があります。

于 2014-05-09T18:55:12.677 に答える