我已经创建了一个基本网页,我的主要内容居中,但是我想在内容的两侧填充空白。
http://hometown.net46.net/test.html
这就是我所拥有的。我想填充左右的空白。注意-网页是一个灵活的框。
这是我的html:

<head>
    <link rel="stylesheet" href="main.css" />
</head>

<body>
<div id="big_wrapper">
    <nav id="top_menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="about.html">About us</a></li>
            <li><a href="posts.php">Posts</a></li>
            <li><a href="booking.php">Booking</a></li>
            <li><a href="contact.php">Contact us</a></li>
        </ul>
    </nav>

    <header id="top_header">
         <h2>Image here</h2>
    </header>
<div id="new_div">
    <section id="main_section">

        <article>
            <header id="welc">
            <h2>Welcome to the lounge!</h2>
            </header>
            <p>The lounge is a youth group for 11 - 18 year olds. We are located in Eastbourne.</p>


        </article>

         <article>
            <header id="article2">
            <h2>The lounge website created!!</h2>
            </header>
            <p>blahblahblahg.</p>


        </article>


    </section>

    <aside id="side_news">
        <h4><u>News:</u></h4>
        <p>Lounge painting - 13th march</p>
    </aside>
    </div>
    <footer id="footer">
        Hosted by <a href="http://joomla.com">Joomla</a>
    </footer>
</div>
</body>


而我的CSS:

*{
    margin: 0px;
    padding:0px;
}
h2{
    font:bold 20px tahoma;
}
h4{
    font:bold 14px tahoma;
}
header, section, footer, aside, nav, article{
    display:block;
}
body{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack: center;

}
#big_wrapper{
    max-width: 1000px;
    margin: 20px 0px;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
}
#top_header{
    background:yellow;
    border:3px solid black;
    padding:20px;
}
#top_menu{
    border:red;
    background:#DBD7D9;
    border-radius:2px;
}
#top_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font:bold 20px tahoma;
    height:30px;

}
#top_menu a{
    color:black;
    text-decoration:none;


    }
#top_menu li:hover{
    background:yellow;
}
#new_div {
    display:-webkit-box;
    -webkit-box-orient:horizontol;

}
#main_section{
    border:1px solid blue;
    -webkit-box-flex: 1;
    margin:20px;
    padding:20px;
}
#side_news{
    border:1px solid red;
    width: 220px;
    margin: 20px 0px;
    padding: 30px;
    background: #66CCCC
}
#footer{
    text-align:center;
    padding:20px;
    border-top: 2px solid green;
}

最佳答案

填充网站中心内容左右两侧空白的一种方法是将main-content div包裹在另一个容器div中,并为容器div提供背景色

<div id="container">
   <div id="main-content">

   </div>
</div>


CSS:

#container{
    width: 960px;
    background: #ccc;
}
#main-content{
    width: 800px;
    margin: 0 auto;
}


工作示例:

http://jsfiddle.net/7N3Ea/7/

关于html - 填充左右边框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15904192/

10-16 21:06