Question

我正在尝试布局一个简单的三列标题，但有些东西不能正常工作。

HTML（忽略可怕的W3C不合规）：

<html>
<body>
<div id="header">
    <span id="left">Page Title</span>
    <div id="center">Logged in as</div>
    <span id="right"><a href="logout.php">Logout</a></span>
</div>
</body>
</html>

CSS：

#header {
padding: 6px;
background-color: #BBB;
}

#left {
float: left;
}

#center {
text-align: center;
}

#right {
float: right;
}

这几乎可行，除了#right掉线，并打破整个事情。我不知道如何解决这个问题，而且我没有做太多浮动布局，所以请耐心等待。

有什么想法吗？

Answer 1

移动元素的顺序。在中心DIV顶部浮动右侧SPAN

此处示例：http://jsfiddle.net/htxFJ/

Answer 2

如果你理解盒子模型，你会知道这是display: block - ＆gt;元素的预期行为。默认值为div。

带有display: block（块元素）的元素在页面上的行为类似于矩形块，并且水平扩展以占用所有可用空间。因此，他们将所有后续元素移位到它们下面的下一个可用空间。

默认设置为span的{{1}}也是如此。内联元素的行为不像“矩形” - 它们像文本一样流动。

因此，在您的情况下，您有几个选项：例如将中心display: inline的宽度设置为固定值，或者设置为百分比。但这不是修复设计的正确方法。查看few three column版面并研究其html和CSS。

干杯！

Answer 3

尝试移动“右”div，使其首先定义：

<div id="header">
    <span id="right"><a href="logout.php">Logout</a></span>
    <span id="left">Page Title</span>
    <div id="center">Logged in as</div>
</div>

Answer 4

这是因为范围#center没有浮动。如下所示：

#center {
    text-align: center;
    float: left;
    }

Answer 5

<html><style>UR CSS</style><body><div id="header">

<span id="left">Page Title</span>
<div id="center">Logged in as
<span id="right"><a href="logout.php">Logout</a></span>
</div>

带有Spans的CSS Div

5 个答案: