0

2 つの画像があり、1 つは左に、もう 1 つは右に浮かんでいます。高さは同じですが、幅が異なります。最初の画像 (左に浮く) にテキストを配置する必要があります。

テキストにcssルールを使用します（position：relative; top：-20em;）、機能しますが、テキストの最初の位置があった場所にテールが残るため、テキスト付きの写真の2行目を配置したい場合、行にギャップがあります。

position:absolute は使用したくありません。2 番目と 3 番目の行に写真とテキストが表示されるためです。

<div class="rightDiv picDiv"><img src="pics/about.jpg" width="100%"/>  </div>
<div class="leftDiv textDiv"> <img src="pics/yellow.jpg" width="100%"/>
<p>some text some text </p>
    </div>

<div class="leftDiv picDiv"><img src="pics/about.jpg" width="100%"/>  </div>
<div class="rightDiv textDiv"> <img src="pics/yellow.jpg" width="100%"/><p>another     text another text</p></div>

そしてCSS：

.rightDiv{
float:right;
}

.leftDiv{
float:left;
}

.picDiv{
width:58.5660377%;
height:58.3333333%;
}

.textDiv{
width:38.7924528%;
height:58.3333333%;
}

.textDiv p{
position:relative;
top: -20em;
height:58.3333333%;
padding:0 3% 0 1%;
text-align:right;
font-size: 120%;
}

十分に説明したことを願っています。また、添付の写真：

http://maria.talvi.com/screenshot.jpg

次の画像が下に配置されるように、テキストを配置するか、このテールを削除するにはどうすればよいですか?

4

1 に答える 1

1

テキスト div で position: absolute を使用する際の懸念事項は何ですか? 私はそのようにします。そのテキスト div を画像がある同じ div にネストして配置し、そのコンテナー div の位置を相対的に設定することを忘れないでください。

「テール」の理由は、相対的に配置された div であるため、「トップ」CSS を介して変更している上端が何であるかに関係なく、ドキュメント フローの最初のスペースを占めるためだと思います。財産。代わりに試してみるとmargin-top、div全体が移動するはずです。

または、画像をコンテナー div の背景画像として使用し、そのコンテナー内にテキストを配置することもできます。ただし、レスポンシブにする場合は、css で他の調整が必要になります。

編集:実際には、div ではなく、段落の top プロパティを設定していることに気付きませんでした。ここをチェックしてください：http://codepen.io/anon/pen/woCyl

topをmargin-top:)に変更してみてください。

段落ではなく、囲んでいる div を配置する必要があります。

さらに明確にするためにEDIT 2：そこで行っているのは、div自体ではなく、親divに関連する段落を配置することです。

于 2013-10-03T13:17:04.600 に答える