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

如果你让book-data div将它的高度保持为自动;比你的文字可以包裹，尽管浮动。如果你没有设置它的高度，使用clear属性将阻止book-data 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>

内容超出范围

2 个答案: