Question

我一直想用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>

Answer 1

通常（特别是对于非响应式网站），您的整个内容（标题，内容，侧边栏，页脚等）都有.wrapper div。然后设置.wrapper的宽度。您的.sidebar将设置width，并且float: left;或float: right;取决于您想要的一面。将.content div width设置为小于或等于.wrapper width - .sidebar width。然后在下方添加.clearfix，以便.footer落在所有内容之下。在大多数情况下（至少对于大页面块），您可以避免position:absolute;，这有助于使事情更容易落实到位。

Answer 2

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

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

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

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

Answer 3

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

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

简单的CSS定位（我认为）

3 个答案: