次のような 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 ピクセルでレンダリングされるため、意図した隣接ブロックが次の行に流れてしまいます。テキストを折り返してコンテナの最大幅を超えないようにするにはどうすればよいですか?