0

我第三次尝试根据 Stack Overflow 成员的更多建议重新编码我的网站以实现响应式布局。这次我使用display:table / display:table-cell设置来居中页面包装器，其高度由内容和粘性页脚控制。

一位成员建议了一个有效的基本布局（谢谢！）但是如果我使用的宽度小于 100%，我无法将内联包装器居中在我的页面包装器中。它强制内联包装器位于页面包装器的右侧。

我尝试了边距、填充和文本对齐。我可能可以用“中心”标签来破解它，但我希望我的代码是语义的。

这是我的代码的精简视图 - 我不确定我是否做错了什么，缺少语法（我之前忘记了一个逗号，这花了我 30 分钟的故障排除时间），它需要 ie10 和 Opera 或其他什么的破解。

<div id="page-wrapper>
 <div id="logo"><img /></div>
 <div id="inline-wrapper">
  <div id="top-content">
   <div id="left"><img /></div>
   <div id="center">content blah blah</div>
   <div id="right"><img /></div>
  </div>
  <div id="nav-menu"><ul><li><img /></li></ul></div>
  <div id="main-content">
   <div id="left"><img /></div>
   <div id="center">content blah blah</div>
   <div id="right"><img /></div>
  </div>
</div></div>
<div id="footer"></div>

html, body, #page-wrapper, #inline-wrapper, #top-content, #main-content {
      height:100%;
    width:100%;
    margin:auto;
}

#page-wrapper {
    height:100%;/* to show footer */
    width:70%;
    position:relative;
    display:table;
    table-layout:fixed;
    border:solid;
}
#logo {
    width:100%;
    top:.75%;
    z-index:99;
    position:absolute;
}
#logo > img {
    width:100%;
}
#inline-wrapper {
    position:relative;
    display:table-cell; <-- /* I removed this */
    width:90%;
    margin:auto;
    background-color:#fff;
    padding-bottom:1%;
}

#top-content, #main-content {
     display:table;
     width:98%;
     border-collapse:collapse;
}
#top-content {
     height:60%;
}

#right, #left, #center {
    display:table-cell;
}

#left {
    background-color:#CC0000;
    width:14%;
}

#left img {
    width:100%;
    height:100%;
}

#right {
    background:#0600ff;
    width:14%;
}

#center {   
    width:72%;
    background:#ccc;
}

#nav-menu {
    width:100%;
    margin:0 auto;
    text-align:center;  
}

#nav-menu li {
    color:#fff;
    margin:auto;
    display:inline-block;
    background-color:#000000;
    list-style-position:inside;
    border:1% solid #ffffff;
    padding:.75%;
    width:12.5%;
    height:31%;
    vertical-align:top;
}

#nav-menu li:hover {
    opacity: .55;
  filter: alpha(opacity=55);
}

#nav-menu li img {
    height:100%;
    width:100%;
}

#footer {
  width:100%;
  height:250px;
  background-color:#000;
  border-top:solid;
}
4

1 回答 1

0

尝试在那里关闭 id: <div id="page-wrapper>。改成这样：<div id="page-wrapper">

于 2013-06-07T08:36:46.490 回答