css - div幅を使用せずに画像とテキストを同じ行に揃えますか?

Question

わかりましたので、テキストの幅を設定せずに、画像 (div に含まれる) とテキスト (div にも含まれる) を同じ行に配置しようとしていますが、どうすればよいですか? これは私がこれまでに持っているものです。

<div id="container">

    <div id="image" style="float:left;">
        <img src="tree.png"  align="left"/>
    </div>

    <div id="texts" style="float:left;"> 
        A very long text(about 300 words) 
    </div>

</div>

テキストが短い場合、画像とテキストは同じ行に収まりますが、私のテキストはかなり長く、画像の下の別の行に自動的にジャンプします。

基本的に、これはこれです: http://puu.sh/MPw2 私はこれを作りたいです: http://puu.sh/MPvr

私はこの問題を3時間ほど解決しようとしています。初心者なので助けてください。:S

Answer 1

スペースが利用できない場合、フローティングは折り返しになります。

とを使用display:inlineしwhite-space:nowrapてこれを実現できます。フィドル

<div id="container" style="white-space:nowrap">

    <div id="image" style="display:inline;">
        <img src="tree.png"/>
    </div>

    <div id="texts" style="display:inline; white-space:nowrap;"> 
        A very long text(about 300 words) 
    </div>

</div>​

Answer 2

試す

<img src="assets/img/logo.png" align="left" />
Text Goes here

単純な HTML 属性:

align="left"

属性のその他の値:

• 下
• 左
• 真ん中
• 右
• 上

Answer 3

目的の効果を得るには、イメージ タグをテキストと同じ div 内に配置する必要があります。次にfloat: left、画像に属性を設定します。お役に立てれば！

Answer 4

この質問を見たとき、私は別のプロジェクトに取り組んでいました。これは私が使用したソリューションであり、うまくいくようです。

#[image id] , p {
        vertical-align: middle;
        display: inline-block;
    }

そうでない場合は、試してください：

float:right;

float:left;

または display: inline代わりにinline-block

これは私にとってはうまくいきました。

Answer 5

U 不要な div を書きました。このままにしておきます

<div id="texts" style="white-space:nowrap;">
     <img src="tree.png"  align="left"/>
     A very long text(about 300 words) 
</div>

あなたが探しているのは white-space:nowrap; です。このコードでうまくいきます。

Answer 6

img cssをdisplay:inlineまたはに設定するだけですdisplay:inline-block