web-dev-qa-db-ja.com

画像を折り返さずに画像の横の段落をフローティングするにはどうすればよいですか？

画像の横にある段落をフロートしたいが、画像を折り返さない。このような：

div.img {
        float: left;
        display: block;
        margin: 15px 2% 0 2%;
        width: 26%; /* I cannot use that */
}

div.info {
        float: right;
        display: block;
        margin: 15px 2% 0 2%;
        width: 66%; /* The width should be variable */
}

問題は、私がwidthをimgとinfoの両方に設定しても、画像が変数の幅/高さ。特定の幅/高さはありません。

私はこの状況でほとんど迷っています。私に何か提案してください。ボックスの幅を指定せずに、両方のdivをラップせずに隣同士にフローティングさせたいです。

解決策..回避策はありますか？

csslayoutcss-float
13
Ahmad Fouad

あなたはJSなしでこれを行うことができます。私のフィドルを見てください http://jsfiddle.net/VaSn6/5/

画像と段落を並べて配置します。

<img />
<p>text</p>

CSSを使用する場合：

img {
    float: left;
    margin-right: 10px;
    clear:both;
}
p {
    margin-left: 0px;
    overflow:auto;
    display:block;

}

私のjsfiddleはこの例を、段落と右揃えの画像をクリアするように拡張しています。

CMSやマーケティングチームにやさしいこのようなものが必要でした（マーケティング担当者はdivを怖がっています！）

これは少なくともIE8まで機能します。

テキストの横に垂直方向に中央揃えの画像が必要な場合は、いくつかのdivが必要です。 http://jsfiddle.net/VaSn6/12/ これは、画像より長いテキストを垂直方向に中央揃えにします。

または、CSSテーブルに問題がなければ、私は http://jsfiddle.net/sY4H8/1/ を使用します（IE8でも問題ありません）。これは、テキストが画像よりも低くても機能します。

22
Nils

この作業を行うための簡単なCSSをいくつか示します

img {
    float: left;
    border: 1px solid black;
    margin: 5px 10px 10px 0px;
}
<p>
    <img src="http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png" width="100" height="140">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.
</p>
8
Hasan Hafiz Pasha

画像だけをフロートし、テキストの段落はフロートしません：

img {
    float: left;
    margin-right: 10px;
}

p {
    font-family: Arial;
    font-size: 13px;
    line-height: 1.3em;
}

参照： http://jsfiddle.net/9WMzZ/

5
Yi Jiang

JavaScriptを使用せずにこれを行う唯一の方法は、 'overflow'プロパティが 'auto'に設定されているコンテナー要素で2つの要素をラップし、画像をフロートし、段落の 'overflow'を 'auto'に設定することです。同じように。

ここでそれが動作するのを見てください： http://jsfiddle.net/leegee/vpjjB/

段落の幅をパーセンテージに設定して、画像とは反対側にフロートさせることもできますが、それがあなたの質問に適切な答えであるかどうかはわかりません。

ちなみに、段落と画像をレンダリングしているときに、昔ながらの「p」と「img」の関連する「セマンティック」要素を使用するようにマークアップを変更しました。

4
LeeGee