1

2 つのインライン ブロックに問題があります。私はこのようなものを作成したい:

<img>  
<span>some long text next to the img</span>

次の構造があります（使用する必要があります）：

<div class="mainContainer">
    <div class="additional">
        <div class="description">
              <img></img>
        </div>
        <div class="description">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit...         
        </div>    
    </div>  
</div>

スタイル:

.mainContainer {
    height: 15px; } //doesn't matter in this case

.additional {   
    line-height: 15px; } //doesn't matter in this case

.description {
     float: left;
     display: inline; 
}

問題は、長いテキストを追加したい場合です。画像はテキストの上にありますが、その隣にある必要があります。

次のようになります (コードを追加しますが、削除する必要があります)。

http://jsfiddle.net/476fm/

助言がありますか？

編集：実際には上記のテキストは単なる例であり、私が達成したいことをより具体的にするために：2つのインライン要素を含む1つのメインコンテナがあります：-最初の要素には画像があります-2
番目には画像もあり、テキストと私がしたいことは: テキストが長く、2 行目に配置する必要がある場合は、最初の画像の下に配置しないでください。

http://jsfiddle.net/z2t7b/ - 修正する必要があります (誰かが私がやりたいことを理解してくれることを願っています)

4

2 に答える 2

1

これはあなたが達成しようとしていることですか？

<div class="mainContainer">
    <div class="additional">
        <div class="description">
            <img></img> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
            <div class="breaker"></div>
            <img></img><div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
        </div>

    </div>  
</div>

.mainContainer {
    height: 23px;
}

.additional{
    line-height: 23px;
}

.description {
    float:left;
    display: inline;
}

.breaker {clear: both;}

img {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
    float:left;
}

ここにフィドルがあります

于 2013-01-21T21:12:27.427 に答える
0

INLINE要素の場合は、「float：left」を削除するだけです。自然なインラインフローが適用され、テキストは通常​​どおり通過します。

OK、今私はあなたの探求を理解しました（i hobe）

コンテナにブロックを持たせて動作させ、左にフロートさせてオーバーフローを追加するだけです。

http://jsfiddle.net/NgfSF/

.description {
padding-right:10px;
float:left;
display: inline;
}

.description1 {
display: block;
overflow: hidden;
}
于 2013-01-21T21:25:39.673 に答える