内容超出限制

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>