html - テキストをインラインに保つ

Question

左側に浮かぶ画像があり、画像の右側にテキストがあります。ただし、テキストは十分な長さであるため、段落の1行が画像の下に表示されます。このテキストを段落と一列に並べて、画像に巻き込まれないようにするにはどうすればよいですか？

Answer 1

If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.

For example, if your HTML is something like:

<img src="image.jpg">
<p>Some text

And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).

That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.

Demo http://dabblet.com/gist/2791183

Answer 2

幅を知り、設定することについて心配したくない場合は、テキスト コンテナーの新しいブロック フォーマット コンテキストを確立することでこれを行うことができます。

つまり、マークアップの場合:

<img src="image.jpg">
<p>Some text

必要なのは、<p>要素に「可視」以外のオーバーフローを与えることだけです。例えば：

p { overflow:auto; }

<img>画像からテキストを分離するために、少し右マージンを使用します。

Answer 3

You need to the float the image element and the text element separately. I think you also need to specify width for both elements.

<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>

Answer 4

If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.

Example:

<div style="overflow: auto;">
    <img src="hello.jpg" style="float: left; width: 200px;">
    <div style="float: left; width: 700px;">
        Hello!!!
    </div>
</div>

The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)