web-dev-qa-db-ja.com

div幅を使用せずに画像とテキストを同じ行に配置しますか？

わかりましたので、テキストの幅を設定せずに、同じ行に画像（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

cssimagehtmlalignment
15
Maria

スペースが利用できない場合、フローティングはラッピングをもたらします。

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>​
17
Paul Fleming

試して

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

単純なHTML属性：

align="left"

属性の他の値：

  • 底
  • 左
  • 中間
  • 右
  • 上
8
Hitesh Modha

この質問は6年以上前ですが、テーブルを使用してメソッドを共有したいので、CSSは必要ありません。

<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>

乾杯！ハッピーコーディング

4
Suyash Doneria

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

4
Greg9Strat

私はこの質問を見たときに別のプロジェクトに取り組んでいましたが、これは私が使用した解決策であり、うまくいくようです。

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

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

float:right;

float:left;

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

これは私のために働いた、これが助けたことを願っています！

2
user5833601

試して

<p>Click on <img src="/storage/help/button2.1.png" width="auto" 
height="28"align="middle"/> button will show a page as bellow</p>

わたしにはできる

1
Hafiz Ahmed

方法1：

インライン要素は、指定した幅や高さを使用しません。 2つのdivを避けて、次のように使用するには：

 <div id="container">
<img src="tree.png"  align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
    <style>
            img {
                display: inline;
                width: 100px;
                height: 100px;
            }
            h1 {
                display: inline;
            }
        </style>

方法2：

次のようにCSSを変更します

.container div {
    display: inline-block;
    }

方法3：

幅を設定する簡単な方法です。次のCSSを試してください。

.container div {
overflow:hidden;
position:relative;
width:90%;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.image {
width:70%;
display: inline-block;
float: left;
}
.texts { 
height: auto;
width: 30%;
display: inline;
}
0
bob marti

私は最後の答えに基づいて構築し、display:table外側のdiv、およびdisplay:table-cell内側のdiv。

これは、CSSを使用して私のために働いた唯一のものでした。

0
John Moore