Question

我想做的是基本上创建一个目录。我需要一个左侧边栏来过滤它的东西，一个右侧边栏用来过滤它的东西和一个顶部中心栏来再次过滤它，而内容将在中间。

这是我的HTML代码

<!doctype html>
<html lang="eng"> 
<head>
    <meta charset="utf-8" />
    <title>My directory</title>
    <link rel ="stylesheet"href = "main.css">
</head> 
<body>
    <div id = "big_wrapper">
    <header id="top_header">
        <h1>My directory<h1>
    </header>

    <nav id="tabs">
        <ul>
            <li>Home</li>
            <li>Ad enquiry</li>
        <ul>
    </nav>
    <aside id = "sidebar1" > <!--sidebar--> 

            <h2>Filter by Location</h1>
                <p>Suva</p>
                <p>Nadi</p>
                <p>Lautoka</p>              
    </aside>

    <section id="content"> <!--content-->

        <article> <!--similar information, own layout-->
            <header>
                <hgroup>
                    <h2>Aramco Construction</h1>
                <hgroup>
            </header>

            <p>Industry : Construction</p>
            <p>Location : Suva</p>
            <p>Link : N/A</p>           

            <footer>
            </footer>
        </article>

        <article> <!--similar information, own layout-->
            <header>
                <hgroup>
                    <h2>Classic Pools</h1>
                <hgroup>
            </header>

            <p>Industry : Construction</p>
            <p>Location : Suva</p>
            <p>Link : N/A</p>           

            <footer>
            </footer>
        </article>

    </section>

    <aside id = "leftbar" > <!--sidebar-->  

            <h2>Filter by xxxxx</h1>
                <p>lol</p>

    </aside>
    <aside id = "rightbar" > <!--sidebar--> 

            <h2>Filter by yyy</h2>
                <p>yolo</p> 


    </aside>
    <aside id = "topbar" > <!--sidebar-->   

            <h2>Filter by Alphabet</h2>
                <p>A</p>
                <p>B</p>
                <p>C</p>

    </aside>

    <footer id="footer_lol">
        Copyright Shuyaib 2014
    </footer>.
    </div>
</body>
</html>

我的css代码

*{
    margin:0px;
    padding:0px;

}
h1{
    font: bold 20px Tahoma;
}
h2{
    font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup{
    display:block;
}

body{
    text-align:center;
    }

#big_wrapper
{
    border: 1px solid black;
    width:1000px;
    margin:20px auto;
    text-align:left;
}
#top_header
{
    background:yellow;
    border: 1px solid blue;
    padding:20px;
}
#tabs
{
    background:blue;
    color:white;
}
#tabs li
{
    display:inline-block;
    list-style:none;
    padding: 5px;
    font: bold 14px Tahoma;

}
#leftbar
{
    float:left;
    width:150px;
    margin:20px 0px;
    padding:30px;
    background:blue;    
}
#rightbar
{
    float:right;
    width:150px;
    margin:750px 0px;
    padding:30px;
    background:blue;    
}
#topbar
{
    float:centre;
    width:500px;
    margin:20px 0px;
    padding:30px;
    background:blue;    
}
#content
{
    float: left;
    width:250px;
    margin-left:250px;
    margin-top:40px;
    background: red;

}


#footer_lol
{
    clear:both;
    text-align:center;
    padding:20px;
    border-top:2px solid green;


}

问题是，我想要我的左栏150px，我的右栏150，剩下的700 px我的中心，如果内容出现在我的左栏顶部，所以我可以在周围弄乱它。似乎正确对齐？有什么建议吗？

Answer 1

而不是使用硬编码值，为什么不尝试使用百分比呢？我确实相信你的填充也会弄乱边缘。你可以尝试宽度120px和30px填充。只是一些建议！

HTML5，创建左，右和顶部中心类别过滤条？

1 个答案: