CSS文本在float left中开始一个新行

Question

我在使用css float left命令时安排我的元素时遇到的问题很小，它浮动到左边并在下一行重复相同的事情但是当任何带有图像的标题更大时，下一个条目会转到下一个划线并留下空间，这对我来说真的很烦人

这是我的CSS

#main {
    width:100%;
    margin-top:55px;
    margin-left:45px;
margin-right:35px;
}
#body {
    float:left;
    margin-left:14px;
    margin-right:24px;
    alignment-adjust:central;
    margin-top:14px;
}
#tablealign {
    text-align:center;
    margin-top:20px;
}
#text {
    color:#333;
    text-decoration:none;
    font-size:12px;
    margin-top:12px;
    text-align:center;  
}
#image{
    margin-left:5px;
    alignment-adjust:central;
        text-align:center;
} 

HTML示例代码[注意我正在使用php]

<center><div id="body"><div id="tablealign"><a href="Videos.php?ID=345"><img  id="image" src=https://i1.ytimg.com/vi/8IpPx1vdJV8/maxresdefault.jpg width=200 height=150></a></div><div id="text"><a href="Videos.php?ID=345">GTA IV Lag Fix on Windows 7 -<br />
YouTube</a></div></div></center>

看起来像这样

Answer 1

您需要在css中添加#text id：

max-height:30px;
overflow:hidden;

这是一个例子：http://jsfiddle.net/pL79v/1/