Question

我正试图将计时器从徽标顶部向右浮动。但它不起作用。如果我使用常规的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%处呈现元素，并且没有任何内容可以浮动。）

所以做这个

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

Answer 2

使用F12调试时会发生什么？你看到任何样式应用于元素吗？还可以查看呈现页面的源代码并查看页面中的实际CSS。然后请从那里发布必要的css进行调试。

Answer 3

尝试添加到div标题：

float:left;

如果您希望div位于下一行，请执行以下操作：

clear: both;

DIV漂浮不起作用。怎么了？

3 个答案: