文章/答案/技术大牛

发布

社区首页 >问答首页 >span和div的定位问题

问span和div的定位问题
EN

Stack Overflow用户

提问于 2011-01-31 15:49:42

回答 1查看 592关注 0票数 0

首先，我不是这方面的专家，但我喜欢改进.

这是我的问题，http://kebax.dk/testdesign/?page=classes。

下面是代码

...
<body>
<div id="outercontainer">
    <div id="navpanel">
        <h3>Navigate:</h3>
        <a href="?page=home">Home</a><br />
        <a href="?page=generalinfo">General info</a><br />
        <a href="?page=classes">Classes</a><br />
        <a href="?page=skills">Skills &amp; Mounts</a><br />
        <a href="?page=proffs">Professions</a><br />
        <a href="?page=guild">Guild</a><br />
        <a href="?page=travel">Travelling</a><br />
        <a href="?page=aution">Auctionhouse</a><br />
        <a href="?page=pvp">PvP</a><br />
        <a href="?page=raids">Raids &amp; Roles</a><br /><br />
    </div>
    <div id="container">
        <?php
           php-include script
        ?>
        <span><center><hr />Copyright &copy;2011 my name</center></span>
    </div>
</div>
</body>
...

下面是LESS样式表：

h2 {
    font-family: 'Orbitron';
    font-weight: bold;
    color: #fff;
    .shadowtext(2px, 2px, 5px, #ddd);
}

h3 {
    font-family: 'Orbitron';
    font-weight: bold;
    color: #000;
    .shadowtext(2px, 2px, 5px, #333);
}

#outercontainer {
    width: 920px;
    min-height: 100%;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    margin-bottom: 25px;
    height:auto !important;
    height:100%;
    padding:0px;


    #navpanel {
        width: 150px;
        margin:auto;
        padding:5px;
        .rounded();
        background: @bgcolor_nav;
        position:relative;
        float:left;
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        border-top-right-radius: 0px;
        .shadow(5px, 5px, 10px, #666);

        a, a:active {
            color: #fff;
            font-size: 9pt;
        }

        a:hover {
            color: #ccc;
            font-size: 9pt;
        }
    }

    #container {
        width: 750px;
        margin:auto;
        background: @bgcolor;
        font-size: 10pt;
        .rounded();
        padding: 5px;
        position:relative;
        .shadow(5px, 5px, 10px, #666);

        -webkit-border-top-left-radius: 0px;
        -moz-border-radius-topleft: 0px;
        border-top-left-radius: 0px;

        a, a:active {
            color: #fff;
            font-size: 12pt;
        }

        a:hover {
            color: #ccc;
            font-size: 12pt;
        }

        p {
            color: #fff;
            position:relative;
        }
        float:right;

        span {
            bottom:0px;
            position:relative;
            hr {
                height:1px;
                background:#000;
                border:0px;
                .shadow(2px, 2px, 2px, #666);
            }

        }

    }
}

#classpanel {
    border:1px solid black;
    width:150px;
    height:200px;
    position:relative;
    float:right;
    top:-220px;
    background:#000;

    a, a:active {
        color: #fff;
        font-size: 8pt;
    }

    a:hover {
        color: #ccc;
        font-size: 8pt;
    }
}

我的问题是，无论页面的内容如何，底部的跨度都必须保持在底部。但我插入的classpanel div似乎干扰了我的版权领域。下面是我想要的样子:)

=============================
| Header         ---------- |
| container      | class  | |
|    for         |  panel | |
|   contents     |        | |
|                ---------- |
|                           |
| ------------------------- |
|        Copyright span     |
=============================

我希望你能帮我..。

html

css

less

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-01-31 15:54:10

那一页不太好。

在Chrome/Firefox中进行测试，如果我将clear: both添加到您的<center>标记(？)中，那么页脚将位于底部。

你真的应该改变这一点：

<span><center><hr />Copyright &copy;2011 Kristian Bak</center></span>

更像是这样的东西：

<div id="footer" style="clear:both; border-top:1px solid #000; text-align: center; padding: 6px 0">
    Copyright &copy;2011 Kristian Bak
</div>

(显然，在样式表中使用内联样式)

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4852848

复制

相似问题

问span和div的定位问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问span和div的定位问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问span和div的定位问题
EN