2

私は自分でウェブサイトを作っていますが、私が抱えている問題に少し行き詰まっています.

div 内には、高さが可変のテキスト ブロックがあります。テキストの右側に、画像の幅を可変の幅と高さに配置したいと考えています。画像の上にテキストが来ない場合があります。

次のようにする必要があります: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg

ここに私が現在持っているコードがあります:

HTML:

<div id="section">
   <div id="image">
      <img src="example.jpg" alt="image"/>
   </div>
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
   Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
  </p>
</div>

CSS

#section {
    position: relative;
}
#image {
    float: right;
    margin-left: 20px;
    position: absolute;
    bottom: o;
    right: 0;
}

このコードでは、画像は div の右下隅に配置されますが、div の高さは画像の高さよりも低くなります。また、テキストは画像を通過するだけです。

4

5 に答える 5

1

これを修正するには、いくつかのことが必要です。

1) セクションに padding-right を追加して、画像と重ならないようにします。

#section {
    position: relative;
    padding-right:<at least image width so the text doesn't overlap>
}

2) div を追加してその中にフロートすると、フロートはドキュメントの流れから画像を削除するため、同じ高さの別の内部 div を追加するか、div の高さを画像と同じ高さにするか、単にフローター div を追加します。

<div id="image">
   <img src="example.jpg" alt="image"/>
   </div>
   <div style="clear:both"></div>
</div>

ここに実用的なソリューションがあります: http://jsfiddle.net/zV3wm/

于 2013-05-19T15:00:15.377 に答える
1

画像の幅とテキストの量を可変にする方法を考えることはできますが、それにはマークアップの重複が必要です。

要点は、画像の非表示バージョンを右フロートし、フロートに対する段落がその下に流れないように、overflow:hidden を使用することです。次に、絶対配置を使用して、非表示でないバージョンの画像をコンテナーの下部に配置します。

http://jsfiddle.net/UmGNZ/でモックアップを用意しました(非表示の画像に部分的な不透明度を与えたので、ドキュメントのどこに追加されているかがわかります) が、疑似 HTML の例:

<container with position:relative>
    <right-float>
        <hidden img tag with opacity: 0 />
        <actual img tag with absolute positioning, bottom: 0, right: 0 />
    </right-float>
    <p with overflow:hidden (or auto) />
</container>

IE7 をサポートする必要がない場合は、CSS テーブルを使用して純粋な CSS ソリューションを試すこともできますが、それ以外の場合は、可視性:hidden を使用して不透明度を優先し、段落スタイルに zoom:1 を追加すると、IE6 まで機能するはずです。 .

于 2013-05-19T15:08:02.490 に答える
0

私は正しいとは思いませんが、フロートライトとマージントップによってそれを達成できます。

#img {
    float: right;
    margin-top: -140px;
}

これをチェックしてください：http://jsfiddle.net/wrujx/

于 2013-05-19T15:18:08.017 に答える
0

柔軟な画像サイズを可能にするこのアイデア: http://jsfiddle.net/David_Knowles/F3zZU/4/

.cell {display:table-cell;}

#section {
    position: relative;
    width:300px;
}
#image {
    vertical-align: bottom;
}

<div id="section">
   <div class="cell">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
    </div>
    <div id="image" class="cell">
        <img src="http://placeimg.com/120/80/any" alt="image"/>
    </div>
</div>
于 2013-05-19T15:12:03.543 に答える
0

最善の解決策は、jQuery (JavaScript) を少し使用して、各部分を可能な限りシンプルに保つことだと思います。これがあなたが持っているものです：

HTML

<div id="wrapper">

    <p>yourtexthere</p>
    <img src="whatever.jpg"/>

</div>

CSS

#wrapper{

    width:600px;
    border:1px solid #000000;

}

p{

    display:inline-block;
    margin-right:20px;

}

img{

    vertical-align:bottom;

}

jQuery

var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)

余分なタグや煩雑な配置なしで、プレーンでシンプルになります。

于 2013-05-19T15:59:24.037 に答える