1

新しく再設計されたWebサイトのCSSやテーブルで問題が発生しています。よく知られている「100％divの高さ」の問題のため、私はWebサイトの構造要素としてテーブルを使用することにしました。したがって、次のようになります。

HTMLマークアップ：

<div id="header">...</div>
  <table>
  <tr>
    <td><div id="main">...</div></td>
    <td class="crighttd"><div id="cright">...</div></td>
   </tr>
</table>
<div id="footer">...</div>

および対応するCSS

table {
  border-top: 1px solid #6A6A6A;
  padding: 0;
  margin-top: 20px;
  border-spacing: 0
}

td {
  vertical-align: top;
  padding:0;
  margin:0
}

.crighttd {
  background: #4F4F4F;
  vertical-align:top;
  margin: 0
}

#cright {
  width: 185px;
  float: right;
  background: #4F4F4F;
  height: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 25px 0 25px 20px;
}

ここでの問題は、明らかに右側のtdが特定のブラウザでまったく表示されないことです（これはMacとIEの古いインスタンスで見られます）。これはCSSの問題ですか、それともテーブルの問題ですか？

4

3 に答える 3

7

よく知られている「100% div の高さ」の問題のため…</p>

そして、それはどれでしょうか？ここで解決したものは？基本的に重要な部分は、

html, body {
    height: 100%;
}

私の知る限り、高さに関して同様の問題があるため、回避策としてのテーブルはここでは使用できません。

于 2008-11-10T23:08:44.163 に答える
1

あなたが達成しようとしていることは、レイアウト用のテーブルに頼る必要なく、CSS の配置とレイアウトだけで完全に可能であると確信しています。

とにかくテーブルが機能していないように聞こえるので、純粋な CSS レイアウトを使用すると、解決策が見つかる可能性が高いだけでなく、より適合性が高く、標準に準拠したサイトを誇りに思うことができます。維持し、将来的に変更します。

私が知る限り、固定幅、中央揃え、2 列のかなり単純なレイアウトを目指しています。「2 列 css レイアウト」を Google ですばやく検索すると、これを実現するために使用できるアプローチに関する多くの例とチュートリアルが提供されます。

于 2008-11-11T09:06:04.737 に答える
0

トラブルシューティングのために、通常、div やその他の要素に境界線を付けて、ページ上のどこにあるかを視覚的に確認できるようにします。

border: 1px solid red;

表示されていないのはあなたの td ではなく、その中にある div であると思われます。css で表示プロパティを設定してみてください。

position: relative;

#cright スタイルから float プロパティを削除することもできます。

これらは必ずしも問題を解決するとは限りませんが、トラブルシューティング方法の提案にすぎません。ページの完全なレイアウトを確認せずに問題を実際にトラブルシューティングすることは困難です。

于 2008-11-10T23:08:36.737 に答える