2

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

4

3 回答 3

6

这是我的结果的小提琴

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

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

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

编辑

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

h1 {
  width:300px;
}

小提琴

此选项似乎更接近您正在寻找的内容

于 2012-12-26T17:26:56.283 回答
1

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

于 2012-12-26T17:11:27.433 回答
0

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

于 2012-12-26T17:37:22.763 回答