1

これが私が遊んでいるjsfiddleです：http：//jsfiddle.net/kwAqu/12/

画像を「info」divとインラインにする必要があります。私はさまざまなことを試しました（情報と画像のスパンを作成し、画像をdivから削除して、表示を配置しました：imgタグ自体のインライン）。

この問題を解決する方法について何かアイデアはありますか？これは私がそれをどのように見せたいかです（境界線などは無視できます）： ここに画像の説明を入力してください

4

2 に答える 2

2

テキストクラスaを利用float: left;して割り当て、widthを囲みます.info div。

また、アイテムが適切に配置されるように、要素を親要素でラップすることもできます。デモでdivのIDを使用してを作成しました。wrapper

HTML：

<div id="wrapper">
    <div class = "one">
        <div class = "image"><img src = "http://www.google.com/images/srpr/logo3w.png"></div>
        <div class = "info">
            <div class = "title">this is my title</div>
            <div class = "text">Hello this is what I'm trying to inline. but its not working! what's going on...?</div>
        </div>
    </div>
</div>

CSS：

#wrapper {
 width: 600px;   
}

.image {
    display: inline-block;
    float: left;
}

.info {
    display: inline-block;
    float: left;
    width: 200px;
    padding: 0 0 0 15px;
}

注：.info divそれに応じて、の幅とともにパディングを調整できますwrapper div。

デモ： http： //jsfiddle.net/Rm7Pg/

于 2012-07-10T23:41:55.903 に答える
1

あなたが探しているのは

.image {
    display: inline-block;
    vertical-align:middle;
}

これにより、画像を残りの要素と一致させようとします。

次のような場所としてそれを読んでください：

http://www.w3.org/wiki/CSS/Properties/vertical-align

于 2012-07-10T23:44:52.617 に答える