0

どうすればこのようなレイアウトを実現できますか？

現在、私はこのHTMLを使用しています。

<div class="image">
  <img>
  <div class="caption">
    Caption Text
  </div>
</div>

そしてこのCSS：

.image {
  background-color: #2A2A2A;
}

img {
  max-width: 590px;
}

ただし、.imageボックスが大きすぎます（親に合わせて拡張されるため）。

代替テキスト

4

6 に答える 6

2

重要なのは、要素または親コンテナーの幅を設定しないことです。img親.imageが単純にフロートされているか、他の方法でコンテンツのサイズに縮小するように調整されている場合、これは機能するはずです。

以前floatはシュリンクラップの側面を達成してposition: absolute;いましたが、同じようにしdisplay: inline-block;ます。

JS Binにデモがあり、jQuery を使用して画像を交換しますが、要素の幅には何もしません。CSS を以下に再掲します。

  .image {
    float: left;    // for the shrink wrap
    padding: 1em;   // To achieve the bordered effect
    background-color: #666;  // just for contrast
    -moz-border-radius: 2em;  // for that web 2.0 goodness...
    -webkit-border-radius: 2em;
    border-radius: 2em;
  }
  .image img {
    -moz-border-radius: 2em;    // no width, anywhere. Presumably width: auto, would  
    -webkit-border-radius: 2em; // work, but that's redundant, since it's the default
    border-radius: 2em;
  }
  .image img + .caption {
    width: 100%;              // forcing the .caption to take up 100% of the width
    background-color: #ffa;   // of its parent, except for the padding, so that it's
  }                           // the same width as the image above.
于 2010-10-08T19:30:39.047 に答える
1

@Kyleが言ったように、ブロック要素は親の幅に合わせて幅を調整します。ただし、ブロック要素をインラインとして設定することは正しいアプローチではありません。ブロック要素の機能を維持しながら、.image div をフローティング要素として設定することで、同様の結果が得られます。トリックを実行する CSS は次のようになります。

.image {
  float: left;
  display: inline; /* needed to fix the (IE <= 6) "3 pixels out of nowhere bug" */
  /* whatever code you may find appropriate in order to render the rounded border */
}
.image .caption {
  clear: left;
}

あなたが必要と感じるかもしれないさらなるスタイルの改善をあなたに残しました.

于 2010-10-08T19:36:47.090 に答える
0

divはブロックレベルの要素であるため、親に合うように拡張されます。

最善の解決策ではないかもしれませんが、事前に画像のサイズがわからない場合は、次のようにすることができます。

.image
{  
    padding: 10px;
    max-width: 590px;  
    disply: inline;  
}

.caption
{  
    background-color: #2A2A2A;
    disply: inline;  
}

上記により、img divがインライン要素としてレンダリングされ、親ではなくコンテンツに合わせて縮小されpadding、境界線が追加されます。

于 2010-10-08T18:43:00.127 に答える
0

.imageボックスの幅を画像と同じ幅に設定し、ボックスにパディングを適用する.imageと、幅を指定するとパディングが追加されるため、探している境界線が得られます。

したがって、基本的には、次の CSS が必要になります。

.image {
    padding: 10px;
    width: 300px; /* assuming the picture is 300px */
}
于 2010-10-08T18:32:07.100 に答える
0

次のことを試してください。

.image {
    position: relative;
    width: 250px;
}
img {
    border: 15px solid #777777;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 100%;
}
.caption {
    border-left: 15px solid #777777;
    border-right: 15px solid #777777;
    border-bottom: 15px solid #777777;
    position: absolute;
    width: 100%;
    bottom: 0px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

<div class="image">
    <img src="yourImage" height="150px" />
    <div class="caption">
        Caption TextCaption TextCaption TextCaption TextCaption Text
    </div>
</div>

キャプション div に 3 つの境界線を適用した理由は、境界線なしの画像の幅がわからないためですが、画像の境界線の幅はわかっているためです。キャプションに同じ境界線を適用すると、キャプションの幅が同じになります。もちろん、.image の幅と img タグの高さを調整する必要がありますが (これは css を介して行うことができます)、残りは自動的に行われます。また、キャプション div は、キャプションが大きくなるようにサイズ変更されます。

よろしく、

リチャード

PSこのコードはChromeで試行およびテストされています-正常に動作します。

于 2010-10-08T18:50:45.590 に答える
0

私は別の解決策を思いつきました。David Thomasの答えがキャプションを画像内に表示するとは思わないので（間違っている場合は必ず訂正してください）、以下のコードを試してください（コードとDavidsの組み合わせを使用しました）。

.image {
    position: relative;
    float: left;
    border: 15px solid #777777;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.caption {
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.image-container {
    position: relative;
}

<div class="image">
    <img src="/Images/header1.png" />
    <div class="caption">
        Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text Caption Text
    </div>
</div>
于 2010-10-08T19:37:50.127 に答える