2


    私はレスポンシブ デザインに手​​を出し始めており、その結果、CSS のベスト プラクティスを特定しようとしています。最終的にカスタムのjquery駆動の画像スライダーになるものの上にキャプションテキストを配置することに取り組んでいます。

これらはすべてhttp://www.taylorp0994.net/websites/cincoschool/index.htmlで    実行されているため、詳細についてはライブの結果とコードを参照してください。

    実行可能な解決策と思われるものを達成しました。ただし、コンテキストに関係なく、ピクセルを使用することはセマンティックではないのではないかと心配しています。パーセンテージを使用して同じ外観を実現するにはどうすればよいですか? また、どのようなアプローチをとればよいですか? (margin-top、position:relative/top など)? キャプションボックスを相対的に配置し、top:-46.5px で上に移動するという現在のソリューションを除いて、明らかな方法でまだ多くの成功を収めていません。

4

1 に答える 1

1

あなたが投稿した作品は本当に有望に見えます！

私のざっくりとした外観から言及する価値のある2つのこと：

  • ピクセル測定を使用することに特に「問題」はありません。これが問題になる可能性があるのは、キャプションの長さだけです。テキストの長さが変わる可能性が高い場合 (つまり、2 行に丸められる場合)、設定された高さ調整を使用しても機能しません。
  • キャプション内に空の「p」タグがたくさんありますが、これは意図的なものですか?

私がこのタイプのタスクに取り組む方法は、ポジショニングを使用することです。

  • 画像とキャプションの両方を含む単一の div ラップを用意します。この相対を配置します。
  • 画像の z-index を低い数値に設定します。
  • キャプションの z-index を高く設定し、position: absolute、bottom: 0 に設定します。これにより、キャプションが親 div の下端から外れて配置され、画像から高さが継承されます。

2 秒後に例を投稿します。

どうぞ: http://jsfiddle.net/HhuhR/ これは非常に簡単ですが、正しい軌道に乗るのに役立つはずです:

<style>
    .img-wrap{
        width: 60%; /*just here for the preview */
        position: relative;
    }
        .img-wrap img{
            max-width: 100%;
            z-index: 1
        }
        .img-wrap .caption{
            display: block;
            width: 100%;
            position: absolute;
            bottom: 5px; /*if using padding in the caption, match here */
            left: 0;
            z-index: 2;
            margin: 0;
            padding: 5px 0;
            text-indent: 5px;
            color: #fff;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.4);
        }
</style>

<div class="img-wrap">
    <img src="http://taylorp0994.net/websites/cincoschool/img/slide1.png" alt= "">
    <span class="caption">Lorem ipsum dolor sit amet</span>
</div>

ビューポートの幅が狭くなるにつれて、キャプション テキストが画像を支配することに注意してください (画像自体が小さくなるため)。私は自分のデザインでこれが問題になるポイントを特定し、単純に下/左のキャプション位置を上書きし、position: relative を設定する傾向があります。これにより、キャプションが重複する (場合によっては完全に覆う) のではなく、画像の真下にドロップされます。 .

于 2013-05-20T10:29:59.477 に答える