内容が狂ってしまう

Question

私はいくつかの本を掲載したページをデザインしています。私は、書籍のタイトルが極端に長く、140pxの高さを超えていると言うと、書籍情報ボックスからコンテンツが出ることがあると困惑しています。私はこれに最善の解決策は何ですか？以下は私のコードのサンプルです。

//css 
.book-data{height: 140px; width: 500px}; 
.book-image{float: left; width: 200px;} 
.book-info{float: left; widdth: 300px;} 

//html 
<div class="book-data"> 
    <div class="book-image"></div> 
    <div class="book-info">content</div> 
</div> 

<div class="book-data"> 
    <div class="book-image"></div> 
    <div class="book-info">content</div> 
</div> 

Answer 1

な単純な： overflow: hidden

http://jsfiddle.net/seler/pyseH/

Answer 2

あなたが本データはそれを維持DIVせた場合は、自動までの高さです。あなたのテキストは、フロートの周りにラップすることができます。両方のプロパティを使用すると、ブックデータの高さが設定されていないときにブックデータの崩壊を防ぐことができます。これを試してみてください。

//css 
.book-data{width: 500px}; 
.book-image{float: left; width: 200px;} 
.book-info{float: left; widdth: 300px;} 
.clear {clear:both;} 
//html 
<div class="book-data"> 
    <div class="book-image"></div> 
    <div class="book-info">content</div> 
    <div class='clear'></div> 
</div> 

<div class="book-data"> 
    <div class="book-image"></div> 
    <div class="book-info">content</div> 
    <div class='clear'></div> 
</div>