7

これは私がレイアウトのために取り組んでいる実験です。この効果を実現するために div を配置する際に多くの問題があったため、古いスタンバイのテーブル カスケードに目を向けました。ここでの私の問題は、最後の上のボックスに 3 つのブラウザすべてで余分なパディングがあり、何を試しても CSS または HTML でパディングできないように見えることです。赤いボックスは、それらを囲む緑色のビットと同じ高さになるはずであり、赤いボックス間の青い行の右側に 1 ピクセルの目に見える緑の線があってはなりません。どんな洞察も非常に高く評価されます。

<!doctype html>
<html>
<head>
<style>
 table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}

td table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}

img { display: block; }
</style>
</head>
<body style="background-color: black;">
<table style="background-color: white; height: 525px; width: 3200; padding-top: 25px;  padding-bottom: 25px;">
<tr>
 <td colspan="1" style="width: 350px;">
   <table class="container" style="height: 475px; width: 350px; margin-left: 25px; margin-right: 25px;">
    <tr>
  <td style="background-color: green; height: 225px; width: 350px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 350px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 175px;">

  </td>
  <td style="background-color: blue; height: 200px; width: 25px;">

  </td>
  <td style="background-color: green; height: 200px; width: 125px;">

  </td>
</tr>
</table>
</td>

<td colspan="1" style="width: 125px;">
<table class="container" style="height: 475px; width: 125px; margin-right: 25px;">
<tr>
  <td style="background-color: red; height: 475px; width: 125px;">

  </td>
</tr>
</table>
</td>

<td colspan="1">
<table class="container" style="height: 475px; width: 450px; margin-right: 25px;">
<tr>
  <td style="background-color: green; height: 25px; width: 225px;">

  </td>
  <td style="background-color: blue; height: 225px; width: 25px;" >

  </td>
  <td style="background-color: green; height: 225px; width: 225px;" >

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 450px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 450px;" colspan="3">

  </td>
</tr>
</table>
</td>

<td colspan="1">
<table class="container" style="height: 475px; width: 400px; margin-right: 25px;">
<tr style="height: 225px;">
  <td style="background-color: green; height: 225px; width: 275px;">

   <table style="width: 100%; height: 225px;">

    <tr>
         <td style="height: 100px; width: 225px; background-color: red;">

         </td>      
        </tr>

        <tr>
         <td style="background-color: blue; height: 25px; width: 225px;">

         </td>
        </tr>      

        <tr>
         <td style="height: 100px; width: 225px; background-color: red;">

         </td>      
        </tr>

       </table>       

  </td>
  <td style="background-color: blue; height: 225px; width: 25px;" >

  </td>
  <td style="background-color: green; height: 225px; width: 100px;" >

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 400px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 400px;" colspan="3">

  </td>
</tr>
</table>
</td>

</table>
</td>

</table>

</body>
</html>
4

1 に答える 1

4

これのことですか？

http://jsfiddle.net/Nq8Us/1/

コードを編集し、問題の赤の下にある緑の余分な「パディング」を削除し、インライン スタイリングを削除してから、.css を指すいくつかのスタイルを追加しました#problem_cell_table。

インライン スタイルをすべて削除し、スタイルシートに移行することをお勧めします。インライン スタイリングは、すべてのスタイルシート コードをオーバーライドします。それは悪いことであり、スタイルシートの変更から何の効果も得られない理由も説明しています.

パディングがある理由については、すべての行、セル、および内部テーブルをラップしているメイン テーブルの高さが、宣言された行の高さを足したものよりも高いためです。すべての行のセルは、宣言された合計に達しないピクセルを補うために、そのサイズを自動的に調整します525px。

私が行った例では、height: 100%誤った計算が発生した場合に高さに合わせて拡張されるように、内部テーブルの css を に設定して「ごまかしました」。

<div>ちょっと待ってください。答えのスタイリング方法にさらに追加します。

編集：

ここで、<div>CSS を使用してレイアウトを試みます。http://jsfiddle.net/XbFcJ/

最初に CSS リセット スタイルシートを使用することを忘れないでください。

CSS: 

<style>
body{
    background: black;
}

.wrapper{
}

.container{
    width: 1500px;
}

.content-table {
    border: 25px solid #fff;
    overflow: hidden;
    background: #fff;
}

.content-column {
    margin-right: 25px;
    float: left;
    height: 475px;
}

.content-column.last {
    margin-right: 0;
}

.first, .third, .last {
    width: 425px;
    background-color: green;
    margin-right: 25px;
}

.top{
    height: 225px;
    border-bottom: 25px solid blue;
}

.left {
    height: 225px;
    width: 200px;
    border-right: 25px solid blue;
}

.content-column.second {
    width: 100px;
    background-color: red;
}

.last .left {
    background-color: red;
}

.last .left .top {
    height: 100px;
    border-bottom: 25px solid blue;
}​
</style>

HTML:

<body>
<div class="wrapper">
    <div class="container">
        <div class="content-table">
            <div class="content-column first">
                <div class="top">
                </div>
                <div class="bottom">
                    <div class="left">
                    </div>
                </div>
            </div>
            <div class="content-column second">
            </div>
            <div class="content-column third">
                <div class="top">
                    <div class="left">
                    </div>
                </div>
                <div class="bottom">
                </div>
            </div>
            <div class="content-column last">
                <div class="top">
                    <div class="left">
                        <div class="top">
                        </div>
                    </div>
                </div>
                <div class="bottom">
                </div>
            </div>
        </div>
    </div>
</div>
</body>​
于 2012-10-16T15:03:43.640 に答える