如何纠正与标题重叠的div答案

【问题标题】：How to correct div overlapping the title如何纠正与标题重叠的div
【发布时间】：2013-04-07 11:57:53
【问题描述】：

编辑：添加 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 以便正确布局元素？

【问题讨论】：

把这个工作示例放在一个小提琴中
要动态获得该行为，而不是使用预定义的宽度值，您需要使用 javascript。使用 CSS，您只能使用预定义的宽度值，这会在您更改链接文本时出现问题。
尝试使用自动换行link

标签： css positioning

【解决方案1】：

这是我的结果的fiddle

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

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

我也把.column8去掉，换成.row div，因为在这种代码格式下，最合适了

编辑

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

h1 {
  width:300px;
}

Fiddle

此选项似乎更接近您要查找的内容

【讨论】：

我明白了，基于标签的内容大约是 300 像素。所以当它只是说 Find a School 使用不同的宽度。

【解决方案2】：

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

【讨论】：

【解决方案3】：

一个答案是为标题设置一个宽度百分比（以允许不同的屏幕尺寸），然后执行white-space: pre 以使文本换行。如需更具体的建议，您需要提琴。

【讨论】：