-1

次のコードを取得しました。コードの一部はあらゆる場所で再利用されます。正常に動作していますが、今は少し問題があり、解決方法がわかりません。

段落内のテキストが非常に幅が広​​く、短いブロックを含むものはそれほど広くない場合、2 番目の div が壊れて次の行に収まり、次の行にテキストが必要ない場合は、次の行にテキストが必要です。画像divの右側。

この問題の解決策は、子の div に max-width を配置することですが、前述したように、コードはいたるところで再利用されており、非常に幅の広いコンテナーがあります。

        div.brief > div {
            float: left;
        }

        div.image {
            -moz-box-shadow: 0 0 5px #939393;
            -ms-box-shadow: 0 0 5px #939393;
            -o-box-shadow: 0 0 5px #939393;
            -webkit-box-shadow: 0 0 5px #939393;
            box-shadow: 0 0 5px #939393;
            padding: 2px;
            display: inline-block;
            margin-right: 10px;
        }


                        <div class="brief">
                            <div>
                                <div class="image"><a href="#"><img width="33" height="33" src="aaa.jpg" title="aaa" alt="aaa" /></a></div>
                            </div>
                            <div>
                                <p>Boudin drumstick pancetta, beef ribs filet mignon pork belly short ribs bacon...</p>
                                <label>By:</label>&nbsp;<a href="#" class="smallhighlight">Somebody</a>
                            </div>
                        </div>

ヒントはありますか？

4

1 に答える 1

1

img/text を div でラップしないでください。

ここに例を示します: http://jsfiddle.net/ANNLP/2/

于 2012-05-22T16:32:27.523 に答える