Question

我有一个问题，我想要一个布局，其中某些元素，如我的水平导航栏，意味着在页面上有一个颜色带，而其他元素在中间只是1000px宽屏幕

所以我有html和css，我认为它应该可以正常工作，实际上它确实直到我在我的Android手机中加载页面，此时在页面上延伸的栏似乎要离开在右边有一个空白，我无法弄清问题是什么。

任何人都可以启发我吗？

代码：

<div id="header">
    <div id="logo" class="widthContainer"><a href="/thimamai/pages/home"><img src="/thimamai/img/logo.png" alt="" /></a></div>
</div>
<div id="navBar">
    <div class="widthContainer">
        <a href="/thimamai/pages/home">Home</a> &nbsp;&nbsp;|&nbsp;|&nbsp;&nbsp;
        <a href="/thimamai/users/logout">Logout</a>&nbsp;&nbsp;|&nbsp;|&nbsp;&nbsp;
        <a href="/thimamai/users/dashboard">Dashboard</a>                               
    </div>
</div>
<div  class="widthContainer">
    <div id="content">
          inside content div          
    </div>
</div>
<div id="footer">
    <div class="fontSize12">&copy; JDL - 1880 - 2014</div>
</div>

样式：

    /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;  padding: 0; border: 0;  font-size: 100%;    font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {  line-height: 1;}ol, ul {    list-style: none;}blockquote, q {   quotes: none;}blockquote:before, blockquote:after,q:before, q:after {   content: '';    content: none;}table {  border-collapse: collapse;  border-spacing: 0;}

#header, #footer{text-align:center;}
#content{padding:20px;}
#navBar{background:#4750a2;line-height:30px;}
#navBar a {color:#ffffff; text-decoration:none;}
.widthContainer{width:1000px;margin:auto;}

Answer 1

您的包装系统似乎会在#navBar和#content之间发生变化：

<div id="header">
    <div id="logo" class="widthContainer"><a href="/thimamai/pages/home"><img src="/thimamai/img/logo.png" alt="" /></a></div>
</div>
<div id="navBar">                     <!-- WRAPPER -->
    <div class="widthContainer">  <!-- INNER CONTAINER -->
        <a href="#">Home</a>
        <a href="#">Logout</a>
        <a href="#">Dashboard</a>                               
    </div>
</div>
<div  class="widthContainer">          <!-- WRAPPER -->
    <div id="content">             <!-- INNER CONTAINER -->
          inside content div          
    </div>
</div>
<div id="footer">
    <div class="fontSize12">&copy; JDL - 1880 - 2014</div>
</div>

在这里，您将.widthContainer视为第一个实例中的包装器，然后是下一个中的子包。

如果您翻转#content和.widthcontainer div，它应该会有所帮助。

尝试将1000px宽的容器放在中心时出现奇怪的结果

1 个答案: