4

現在の様子: http://jsfiddle.net/cSazm/

私が望む方法: http://jsfiddle.net/mhprg/

2番目のバリアントの問題は、画像の正確なサイズがわからないため、固定CSSマージンが機能しないことです:(また、余分な醜いdivがあります..

他の解決策はありますか？

4

6 に答える 6

4

画像をフロートさせてからdiv、をテーブルセルとしてスタイル設定すると、使用可能な幅の100％まで自動的に拡大されます。

HTML：

<img src="http://lorempixel.com/g/80/80/" alt="" /><div>Text</div>

CSS：

div{
    display:table-cell;
}    

img{
    float:left;
}

↪JSFiddleでこの例を見る

于 2012-09-24T13:46:32.507 に答える
3

「シュリンクラップ」メソッドを使用して、テキストを含め、画像の下に流れないようにすることができます。

http://jsfiddle.net/cSazm/5/

overflow:hidden（テキストdivに追加するだけです）

ただし、余分な div の問題は解決しません。

于 2012-09-24T13:48:38.197 に答える
2

画像を浮かせている場合 (この場合は左) overflow:hidden;、テキスト div に適用します。したがって、CSS は次のようになります。

image{
  float: left;
  width: 50px;
  height: 50px;
}

text-div{
  overflow: hidden;
}

画像/テキストのサイズに関係なく、この手法を使用すると、コンテンツが画像の下に流れることはありません。

これについて詳しく知るために、Nicole Sullivan は素晴らしいブログ投稿を書きました: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

于 2012-09-24T18:01:54.513 に答える
2

テキストに幅を設定する必要があります (これは、ap タグまたは任意のものに設定する必要があります)。次に、p を左にフロートできます。

これは理想的ではなく、構築したいものにはうまくいかないかもしれない全体像に基づいていますが、最善の方法です。特に、フローティング レフトは、画像などのオブジェクトをテキストとインライン化するために構築されているため、本質的には、css があまり親切に受け入れない規範を上書きしようとしています!

于 2012-09-24T13:27:29.457 に答える
1

次のように画像の幅を修正します

<img src="http://lorempixel.com/g/80/80/"  width="42" />

次に、divやpなどのタグにテキストを追加します

 <div class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
      </div>

単一のdivでタグの上にネストします。ここで、テキストの余白を画像の幅として割り当てるだけです。

.text{
    margin-left: 42px;
}

上記の画像42の幅を設定したので。

于 2012-09-24T13:35:06.957 に答える
1

シンプルに、次のように画像の右マージンを設定します。

img {
    float: left;
    margin-right: 10px;
}
于 2012-09-24T13:21:05.740 に答える