Question

使用HTML / CSS实现以下目标的最简单方法是什么：

+---------+---------------------------------------------------+
| my      | Home About Categories Donate                      |
| best    +---------------------------------------------------+
| website | Search __________                                 |
+---------+---------------------------------------------------+

约束：

“我最好的网站”是文字，而不是图片，因此无法在px中指定“标头”的高度
两个长矩形的高度应占方箱高度的50％
两个长矩形应该“一直”向右伸展

这是我最好的尝试：

#masthead {
    background-color:red;
}
#masthead-sitename {
    font-size:3em;
    float:left;
    color:white;
    padding:20px;
    background-color:black;
    width:188px;
}
#masthead-twobars {
    float:left;
    background-color:green;
}
#masthead-menu {
    float:left;
    width:100%;
    font-size:x-large;
    color:white;
    padding:20px;
    background-color:gray;
}
#masthead-search {
    float:left;
    width:100%;
    font-size:x-large;
    color:white;
    padding:20px;
    background-color:yellow;
}

<div id="masthead">
    <div id="masthead-sitename" >
        my<br/>best<br/>website
    </div>
    <div id="masthead-twobars" >
        <div id="masthead-menu">
            Home About Categories Donate
        </div>
        <div id="masthead-search">
            Search
        </div>
    </div>
</div>

它失败了，因为两个长矩形不会一直向右延伸，两个长矩形的高度不会达到“masthead-sitename”的高度

Answer 1

将标头左侧填充与网站名称一样宽，然后将网站名称绝对放在填充上方。不要浮动杆，不要给它们宽度。它们只是自然地填充容器而不会重叠左边的衬垫。将网站名称的高度设置为100％，并使条形高度足以完全显示网站名称。

演示： http://jsfiddle.net/d6xsQ/1/

.masthead { 
    padding-left: 218px;
    background-color:red; 
    position: relative;
} 
.masthead .sitename {
    position:absolute;
    left: 0;
    top: 0;
    font-size:3em; 
    color:white; 
    background-color:black; 
    width:218px;
    height: 100%;
    overflow: hidden;
} 
.masthead .sitename > div {
    padding:20px;
}
.masthead .bar { 
    font-size:x-large; 
    padding:40px 20px;
}
.masthead .menu { 
    background-color:gray;
    color:white;
}
.masthead .search {
    background-color:yellow; 
}

<div class="masthead">
    <div class="sitename" >
        <div>
            my<br/>best<br/>website
        </div>
    </div>
    <div class="bar menu">
        Home About Categories Donate
    </div>
    <div class="bar search">
        Search
    </div>
</div>

Answer 2

http://jsfiddle.net/4cn7q/3/

基本上，让网站名称决定框高度，并绝对将两个“行”放在包装器中。

（如果您愿意，可以选择使用各种技术垂直居中行中的内容。）

Answer 3

“最简单”（虽然可能不是最好的方法）是使用表格：

<table>
    <tr>
      <td rowspan="2">my best website</td>
      <td>Home About Categories Donate</td>
    </tr>
    <tr>
      <td>Content goes here</td>
    </tr>
</table>

然而，我知道很多人会因为暗示这一点而骂我。嘿，我只是不想花费五个小时让CSS工作，好吗？：P

使用html / css排列三个矩形

3 个答案: