0

Stack Overflow メンバーからの提案に基づいて、サイトをレスポンシブ レイアウトに再コーディングする 3 回目の試み。今回はdisplay:table / display:table-cellセットアップを使用して、高さがコンテンツとスティッキー フッターによって制御されるページ ラッパーを中央に配置します。

メンバーは機能する基本的なレイアウトを提案しました (ありがとう!) しかし、100% 未満の幅を使用すると、インライン ラッパーをページ ラッパー内の中央に配置できません。インライン ラッパーをページ ラッパーの右側に配置します。

マージン、パディング、テキストの位置合わせを試しました。おそらく「center」タグでハックできますが、コードをセマンティックにしたいのです。

これは私のコードの要約です - 何か間違ったことをしているのか、構文が欠けているのかわかりません (以前にコンマを忘れたため、トラブルシューティングに 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 に答える