使用三列创建网页标题

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进行明确修复，以便它包含所有浮动的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个该死的硬币并发表评论，哈哈。