0

2つの共有セクションがあります。テキストで構成されるヘッダーと、その右側に浮かぶ画像です。画像の幅は常に308pxにし、テキストの長さのニーズに応じて画像の高さをトリミングしたいと思います。コンテンツの長さが変更される可能性があるため、.locationに固定の高さを設定することには興味がありません。これはどのように行うことができますか？（ありがとうございました！）

HTML：

<section class="location">
<img src="http://evinwolverton.com/img/disc.jpg">
<header>
    <h2>This Is A Headline</h2>
    Etiam porta sem malesuada magna<br/> 
        Mollis euismod. Duis mollis<br/>
        Est non commodo luctus, nisi erat<br/>
        Porttitor ligula, eget lacinia odio<br/>
        Sem nec elit.
</header>
 </section>

CSS：

.location {
    border: 2px solid #ccc;
    overflow: hidden;
    width: 620px;
    color: #666;
    margin: 40px 0;
}

.location header {
    float: left;
    padding: 25px;
    width: 258px;
}

.location h2 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
}   

.location img {
    float: right;
    width: 308px;
}
4

3 に答える 3

2

背景画像を使用する別の解決策は、これを実際の<img>タグにしたい場合は.location、相対位置に配置し、オーバーフローをここに隠して、画像に絶対位置を与えることです。画像の後ろに隠れないように、テキストホルダーにもマージンを与える必要がある場合があります。

.location {
    position: relative;
    overflow: hidden;
}
.location img {
    position: absolute;
    top: 0px;
    right: 0px;
}
于 2013-03-26T23:15:36.297 に答える
0

最も簡単な方法はbackground-image、右上隅に揃えてを使用することno-repeatです。

于 2013-03-26T23:13:38.443 に答える
0

画像をタグにする必要がない場合はimg、背景画像としてヘッダーに適用できます。しかし、そうではないと思います。

試す：

.location img {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
}

http://www.w3schools.com/cssref/pr_pos_clip.asp

[編集]

申し訳ありませんが、試してみてください。ヘッダー内clip: rect(0px, 308px, 100%, 0px);に画像をフロートさせる必要があると確信しています。

于 2013-03-26T23:13:43.470 に答える