3

我一直想用 css 定位替换我网站中的表格，并且一直在尝试通过教程等自学。我已经取得了一些早期的成功，但是当我尝试创建侧边栏时，一切都崩溃了。我希望这个问题有某种简单的解决方案。元素的相对/绝对定位并没有接近我想要做的。我的目标是有一个侧边栏，其中包含从上到下堆叠（浮动？）的图像，中间元素是无序列表的一部分。我让它工作了一次，但现在那个堆栈在彼此之上。它必须是我设置浮动和绝对/相对定位的方式。在这里阅读了一些文章后，我尝试添加一个 div 包装器将它们放入其中，但我想我让自己更加困惑。是否有人可以将我推向正确的方向？这是代码：

CSS

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 50px;
    padding: 0px;
    color: #696969;
    height: 160px;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   ----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}



/* PRIMARY LAYOUT ELEMENTS  ---------------------------------------------------------*/

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
    top: 0px;
    left: 0px;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 0px 4px 4px 4px;
    min-height: 420px;
    width: 500px;
    float: left;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}




/* MISC ----------------------------------------------------------*/

.clear
{
    clear: both;
    width: 936px;
    height: 35px;
}

.title
{
    display: block;
    float: left;
    text-align: justify;
}


.bold
{
    font-weight: bold;
}


p.clear
{
    clear: both;
    height: 0;
    margin: 0;
    padding: 0; 
}

#wrapper
{
    position:relative;
    height: 500px;
    width: 900px;
}

#insidemain
{
    position:absolute;
    float: left;    
    width: 500px;
    height 180px;
}


/* ---------------- Sidebar Items ---------------------*/


#sidebar   /* Sidebar container */
{
    position:absolute;
    border-top: 1px solid #99CC33;
    border-left: 1px solid #99CC33;
    height: 300px;
    width: 180px;
    margin-right: 5px;
    padding: 5px 0 0 5px;
}

#sidebarHeader
{
    position:absolute;
    height: 37px;
    width: 172px;
    float: left;
    background-image: url(../img/TopMenu.jpg);
    background-repeat:no-repeat;
}

#sidebarItems ul
{
    position:absolute;
    height: 27px;
    width: 172px;
    float:left;
    background-image: url(../img/MenuItems.jpg);
    background-repeat:no-repeat;
    /*left: 6px;
    top: 45px;*/
    background-position: 0px -27px;
}

#sidebarFooter
{
    position:absolute;
    height: 46px;
    width: 172px;
    float:left;
    background-image: url(../img/BottomMenu.jpg);
    background-repeat:no-repeat;
}

和HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title></title>
        <link href="Styles/Simple.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="page">
            <div class="header">header
                <div class="title">
                    <h1>
                        Test Page
                    </h1>
                </div>
            </div>
            <p class = "clear">clear</p>
            <div id="wrapper">
                <div id="sidebar">
                    <div id="sidebarHeader">
                    </div>
                    <div id="sidebarItems">
                        <ul>
                            <li>test item</li>
                        </ul>
                    </div>
                    <div id="sidebarFooter">
                    </div>
                </div>
            </div>
            <div id="insidemain">
                main
            </div>
        </div>
        <div class="clear">clear</div>
        <div class="footer">
            <a href="http://www.google.com/">
                Blah blah test to see how far this will go across the page blah blha lorem ipsum and various other stuff that is meaningless etc
            </a>
        </div>
    </body>
</html>
4

3 回答 3

2

通常（特别是对于非响应式网站），您的.wrapperdiv 会围绕整个内容（页眉、内容、侧边栏、页脚等）。然后设置你.wrapper的宽度。你.sidebar会有一套width，它会float: left;或float: right;取决于你想要它的一面。设置你的.contentdivwidth小于或等于你的.wrapper width- 你的.sidebar width. 然后添加您的.clearfix下方，以便.footer在所有内容下方。在大多数情况下（至少对于大页面块），您可以避免position:absolute;这有助于使事情更容易到位。

于 2012-09-12T19:25:13.493 回答
1

你真的不应该浮动你的 div 或列表。这些默认情况下是块元素，无论如何都会垂直堆叠。

此外，正如 Scrimothy 所提到的，您不需要绝对定位的元素，因为这会将元素从页面流中取出。换句话说，它们不再占用页面中的“真实”空间，而是在您放置它们的任何坐标处呈现。

同样，浮动也不占用空间，除了其他浮动元素。这就是为什么一些 UI 开发人员会浮动页面上的几乎每个元素并使用页脚或页面中的关键中断“清除”它们。我个人不建议以这种方式定位，而是针对每个人自己的定位。

看看这个快速教程是否可以帮助您了解一些关键的定位概念：这里

于 2012-09-12T22:41:55.970 回答
1

不要同时使用float和来定位相同的元素position:absolute。这没有多大意义。任何你有的地方，你都float应该摆脱position:absolute

接下来，摆脱那些愚蠢的class="clear"元素。相反，.footer使用clear:both和.page使用overflow-y:hidden;

于 2012-09-12T23:01:18.973 回答