html - 创建包含三列的网页标题

Question

这是在style.css：

#top{
    background: white;
    text-align: center;
    height: 180px;
    border-bottom: solid 1px #efeecc;
}

#topLogo{
    background: yellow;
    width: 25%;
    float:left;
}

#topDescription {
    background: red;

    width: 75%;
    text-align: center;
}

#topDepartment {
    background: blue;
    float:right;
    width: 25%;
    text-align: right;
}

这是index.html：

<div id="top">
    <div id="topLogo">
        <a href="index.html"><img src="img/book.jpg" width="170" height="160" border="0"/></a>
    </div>
    <div id="topDescription">
        Page title
    </div>
    <div id="topDepartment">
        Category        
    </div>
</div>

这是预期的结果：

这是目前的结果：

http://jsfiddle.net/p2T5q/

Answer 1

这是一个演示：http: //jsfiddle.net/p2T5q/7/

CSS：

#top{
    background: white;
    text-align: center;
    display:table;
    height: 180px;
    border-bottom: solid 1px #efeecc;
}

#topLogo{
    background: yellow;
    width: 25%;
    display:table-cell;
}

#topDescription {
    background: red;
    display:table-cell;
    width: 50%;
    text-align: center;
}

#topDepartment {
    background: blue;
    display:table-cell;
    width: 25%;
    text-align: right;
}

Answer 2

好吧，快速的回答是你的 div 的总宽度是 125%，所以你需要改变它，使它等于 100%。

其次，您可能希望对顶部 div 进行明确修复，以便它包含所有浮动的。

另外，不要使用内联样式，因为您可以将它们放在 CSS 文件中。您正在为位于具有百分比宽度的 div 内的图像提供固定宽度。如果用户减小其视口的大小，那肯定会中断。

Answer 3

给你，我修好了小提琴并在这里复制了答案：

http://jsfiddle.net/p2T5q/2/

#top{
    height: 180px;
    border: solid 1px #555555;
    position:relative;
}
#top * {
    float:left;
}
#topLogo{
    background: yellow;
    width: 25%;
}
#topDescription {
    background: red;
    width: 50%;
}
#topDepartment {
    background: blue;
    width: 25%;
}

基本上确保宽度百分比加起来为 100% 并将所有元素浮动到左边，这样他们就知道他们应该定位自己的位置。您可以使用 * 选择所有子元素。我会很感激你接受这个答案，这样我终于可以拿到我的 50 个该死的硬币并发表评论了，哈哈。