css - DIV 右浮动不起作用。怎么了？

Question

我正在尝试将计时器 float 在 Logo 的右上方。但它不工作。 如果我使用常规的 style="float:right" 它会完美...

<div id="whole_page" />

            <div id="header" />
            <?php echo "$logo" ?>   
            <div id="timer" style="float:right" /><?php

            echo "$today"; 
            ?></div>
            </div>
            <div id="nav" />
            Home | 
            About | 
            Help
            </div>
            <div id="content" />
            <?php
            echo "Hello, my name is, $first_name \"$nick_name\" $last_name<br />";
            echo "I am from $city, $country<br />";
            ?>
            </div>
      </div>    

这是CSS:

#whole_page {
    width:          65em;
    margin:         auto;
    padding:        0;
    text-align:     left;
    border-width:   0 1px 1px;
    border-color:   #000;
    border-styler:  solid;
}

#header {
    color:          white;
    background:     #ebebeb;
    font-size:      24pt;
    margin-bottom:  0;
    font-weight:    bold;
}

#timer {
    float:          right;
    margin-bottom:  0;
}

#nav {
    color:          #000;
    font-size:      12pt;
    font-weight:    none;
    background:     #ebebeb;
    padding:        0.5em;
    border:         none;

Answer 1

通常，要使 float 起作用，您需要在元素上设置 width。

(否则，浏览器会以 100% 渲染元素，并且没有任何内容可以 float 。)

所以做这个

#timer{
    width:200px; //OR WHATEVER SIZE
    float:right;
    margin-bottom:0;
}