Question

我的第三次尝试根据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;
}

Answer 1

尝试在那里克隆id：<div id="page-wrapper>。将其更改为：＆lt; div id="page-wrapper">

包装表内的中心表格单元格 - 3列，流体布局

1 个答案: