0

これを修正する方法がわかりません。

http://jsfiddle.net/PaDvr/

画像をテキストの上ではなく、テキストの前に配置したいと思います。

html：

<div id="photo">
<img style="-webkit-user-select: none" src="http://cdn.androidpolice.com/wp-content/themes/ap1/images/android1.png">
</div>
<div id="text" class="media-body">
    lorem ipsum bla blah...
    </div>​

css：

#photo{
    border: 1px solid black;
    max-width: 100px;
    max-height: 200px;
    min-width: 266px;
    min-height: 286px;
    position: relative;
    left: 32%;
    top: 23px;
}​

画像がテキストの上に表示される原因は何ですか？

4

5 に答える 5

3

ここには2つの問題があります。1つ目は、最大と最小の幅と高さの設定です。divの最大の高さは、少なくとも画像と同じ高さで、最小の高さよりも高くする必要があります。こちらをご覧ください

#photo {
  ...
  max-height: 404px;
}

2つ目は、relativeポジショニングによって通常のドキュメントフローから削除されることです。ポジショニングの性質上、relative23ピクセル下に移動すると、その下にあるものの上に23ピクセル移動します。これをオフセットする1つの方法は、相対オフセットに等しいマージンボトムを画像に追加することです。JSFiddleで表示

#photo {
  position: relative;
  left: 32%;
  top: 23px;
  margin-bottom: 23px;
}

画像を上下に動かそうとしているだけなら、相対的な位置ではなく余白を使用します。JSFiddleで表示

#photo{
  ...
  margin-left: 32%;
  margin-top: 23px;
}​
于 2012-12-21T17:55:07.423 に答える
1

あなた max-height: 200px;とtop: 23px;がこの問題を引き起こしています。あなたがそれを取り除くならば、それは重ならない。http://jsfiddle.net/PaDvr/3/

于 2012-12-21T17:55:30.280 に答える
1

CSSから削除max-height: 200px;して追加します

.​media-body {
    margin-top: 23px;  
}​

#photoのtop：23pxを考慮する必要があります。これは、.media-body margin-top：23px;を設定することで実行できます。

于 2012-12-21T17:56:50.873 に答える
0

top：xxは相対オブジェクトをプッシュするため、追加します

margin-bottom:23px

ej：

#photo{

    border: 1px solid black;

    max-width: 100px;

    max-height: 200px;

    min-width: 266px;

    min-height: 286px;

    position: relative;

    left: 32%;

    top: 23px;

    margin-bottom:23px

}    ​

テスト： http： //jsfiddle.net/PaDvr/5/

于 2012-12-21T18:02:02.443 に答える
0

フルサイズの画像を表示したい場合は、上記の回答で問題が解決します。

ただし、画像を最大幅100ピクセルに縮小し、写真divに限定する場合、根本的な原因は、デフォルトでブートストラップCSSが画像にmax-width：100％を適用しているため、サイズ変更がオフになっていることです。 。

解決策は、新しいクラスを追加することです 

#photo img{
max-width:100px;
}

http://jsfiddle.net/PaDvr/28/を参照してください

次に、上記の提案を使用して、必要に応じて写真のdivのサイズを変更できます

于 2012-12-22T13:44:14.463 に答える