內容超出限制

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保持它的高度爲自動;比你的文字可以環繞，儘管浮動。使用清除這兩個屬性將防止書籍數據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>