1

次のような HTML 要素があります。

<li class="store-display-item">
    <div class="store-display-item">
        <img class="store-display-image" src="/Images/ToughBook.jpg">
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>

次のようにスタイリングします。

.store-display-item
{
    display: inline;
    width: 100px;
    max-width: 100px;
    word-wrap: break-word;
    margin-right: 10px;
}

.store-display-image
{
    max-width: 100px;
    max-height: 70px;
}

それでも、<p>QuickTrav Carbon Footprint</p>ほぼ 140 ピクセルでレンダリングされるため、意図した隣接ブロックが次の行に流れてしまいます。テキストを折り返してコンテナの最大幅を超えないようにするにはどうすればよいですか?

4

4 に答える 4

2

これを試してみてください

.store-display-item p {
    width:100px;
    word-wrap:break-word;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

それがあなたの問題を解決することを願っています

于 2012-09-21T07:18:41.370 に答える
1

そのインラインが原因です。内側の div からクラスを削除し、次を追加します。

.store-display-item div { width: 100px; }

<li class="store-display-item">
    <div>
        <img class="store-display-image" src="/Images/ToughBook.jpg">
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>​
于 2012-09-20T20:33:32.160 に答える
0

クリス・カリューとマニはどちらも正しいです。幅の問題を引き起こしているのは表示です：インライン（Pumbaa80が述べているように、インライン要素はwidthプロパティを無視します）。liのインライン動作を維持したい場合、cssは次のようになります。

.store-display-item
{
    width: 100px;
    max-width: 100px;
    word-wrap: break-word;
    margin-right: 10px;
}

li.store-display-item {
    display: inline-block;        
}

.store-display-image
{
    max-width: 100px;
    max-height: 70px;
}​

表示：インラインブロック; liの幅はそのまま維持されます（計算された幅は0で、display：inlineを使用します）。

参考文献：

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

于 2012-09-21T07:31:33.560 に答える
-2

あなたの不適切な html が原因だと思います、あなたは img を /> で終わらせていませんでした これを試してください

<li class="store-display-item">
    <div class="store-display-item">
        <img class="store-display-image" src="/Images/ToughBook.jpg" />
        <p>QuickTrav Carbon Footprint</p>
    </div>
</li>
于 2012-09-20T20:35:08.700 に答える