CSS Div with accompanying Spans_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-16 03:55 出处：网络

I\'m trying to layout a simple three-column header, but something\'s not working quite right. HTML (Ignore the horrible W3C uncompliance):

I'm trying to layout a simple three-column header, but something's not working quite right.

HTML (Ignore the horrible W3C uncompliance):

<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;
}

This almost works, except that #right drops down a line, and breaks the entire thing. I'm not sure how to fix this, and I haven't done much layout with floating, so bear with me.

Any thoughts?

Move the order of the elements. Have the floated right SPAN on top of the center DIV

Example here : http://jsfiddle.net/htxFJ/

If you understand the box model, you would know that this is the expected behaviour of an element with display: block -> default on a div.

Elements with display: block (block elements) behave like a rectangular block on the page, and expand horizontally to take up all available space. Hence they displace all subsequent elements to the next available space below them.

The same is not true with a span, which has display: inline set by default. Inline elements do not behave like "rectangles" -- they flow like text.

So in your situation you have a few options: like setting the width of the center div to a fixed value, or to a percentage. But that is not the correct way to fix the design. Take a look at a few three column layouts and study their html and css.

Cheers!

Try moving your "right" div so it is defined first:

<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>

This is because the span #center is not floating. put it like the following:

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

<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>