0

我创建了一个基本网页，主要内容居中，但我想填充内容两侧的空白。 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;
}
4

1 回答 1

1

在您的网站上填充居中内容的左侧和右侧的空白区域的一种方法是将main-contentdiv 包装在另一个容器中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/

于 2013-04-09T14:11:17.553 回答