如何纠正div重叠标题

Question

编辑：添加了jsFiddle：http://jsfiddle.net/gdHuh/

在我的页面上有一个带有底部边框的标题。标题和边框之间有填充。在标题区域右侧浮动，触摸底部边框，是一个搜索框。这是它的样子：

但是，当标题和搜索框文本太长时，标题文本的一部分会被搜索框隐藏：

在我这样的情况下，这就是我想要的样子：

这是我的HTML：

<div class="row">
    <div class="column column8">
        <h1>Internship Reviews &amp; Rankings</h1>
    </div>
    <div class="findTop column column8">
        <div class="greyShaded findTab">
            <img class="verticalBottom" src="images/blueMagnify.png"/> 
            <a>Find an Internship Program</a> 
            <img class="verticalTextTop" src="images/greyArrowheadRight.png"/>
        </div>
    </div>
</div>

和CSS：

/* More Specific CSS */    
.findTab{
    float: right;
    margin: 0px 5px;
    padding: 5px 10px;
    font-weight: bold;
    line-height: 24px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #f5f5f5;
    font-family: "Helvetica Neue", arial, helvetica, sans-serif;
    font-size: 13px;
}
.findTop{
    border-bottom: 1px solid #ddd;
    margin-top: -23px;
}

/* More general CSS */
.row {
    clear: both;
    width: 100%;
    position: relative;
}
.column {
    margin: 0 15px;
    float: left;
    border: 0;
    padding: 0;
    position: relative;
}
.column8 {
    width: 610px;
}
h1{
    font-size: 28px;
    line-height: 32px;
    margin: 0px;
    padding: 0px;
    font-family: "Helvetica Neue", arial, helvetica, sans-serif;
    font-weight: bold;
}

如何更改HTML和CSS以便正确布置元素？

Answer 1

以下是我的结果fiddle

为了避免添加我使用的另一个类

.row div:nth-of-type(1){
  width:300px;
  margin-right:-20px;
}

我还删除了.column8并将其替换为.row div，因为在此代码格式中，这是最合适的

修改

另一种选择是保持所有代码相同，但添加

h1 {
  width:300px;
}

Fiddle

此选项似乎更接近您所寻找的

Answer 2

我想在这种情况下，可以帮助您使用jQuery的最佳方法。我修改了一下你的代码，现在它看起来像this。您可以调整“结果”区域的大小以确保一切正常。您还可以使用white-space css属性（将其添加到类'title'）。

Answer 3

一个答案是设置标题的宽度百分比（允许不同的屏幕大小），然后执行white-space: pre进行文本换行。有关更具体的建议，您需要提出一个小提琴。