6

少し前に、テーブル レイアウトを使用せずにこれを行う方法を見つけようとしていました。

<table>
  <tr><td rowspan="2">Left column</td></tr>
  <tr><td>Right Top</td><td>Right bottom</td></tr>
</table>

結局、私はあきらめて、テーブルなしではできないと判断しました (CSS 3 ならできるかもしれませんが、さらに 5 年から 10 年待つのは現実的ではありません)。

誰かがこのような例をもっと持っていますか? （または、もっといいのは、私が間違っていたことを教えてもらえますか？）

4

10 に答える 10

4

タイトルの質問に答えるには、厄介なこと、非常に難しいこと、または不可能なこと:

  • 変数と計算 (式はカウントされず、変数は色のサニタイズなどに便利です)
  • 垂直センタリング
  • 寸法を「残りのスペース」に設定する (表の「*」など)
  • 相対単位と絶対単位を効果的に混合する (上記はこれらの問題のほとんどを解決します)
  • 角の丸み、背景のフェード、ドロップ シャドウなどのスタイル効果
  • テキストの空白制御
  • 標準化されたサブピクセルの丸め (これは直接的な CSS の問題ではなく、環境の結果です)

このようなもののいくつかは、将来がすでに公平になるように書かれています.

于 2009-01-26T10:58:51.133 に答える
2

この質問への回答を確認することをお勧めします。回答のために提出された興味深い CSS コードがいくつかありました。これには、これまでに見たことのない問題を解決する構成が含まれていました。非常に便利なリンクもたくさんあります。

于 2009-01-24T23:03:28.247 に答える
2

設計が実行可能かどうかという質問に誰かが答えました。しかし、css ではできないことの例があります。cellspacing何らかの理由で、テーブルのand をcellpadding明示的に設定する必要があります。marginandpaddingプロパティがあっても、css で設定することはできません。これは、CSS を介してテーブルのマージンとパディングを常に制御したいので、非常に面倒だと思っていました。

例えば

<h1> This table won't have it's margin or padding reset </h1>
<table style="padding: 0; margin: 0;">
    <tr><td>a</td><td>b</td></tr> 
</table>

<h1> This table will... </h1>
<table cellspacing="0" cellpadding="0">
    <tr><td>a</td><td>b</td></tr> 
</table>
于 2009-01-24T23:06:53.497 に答える
1

CSSで実現できなかったのは、垂直方向に中央揃えの画像です。私はいつもこのようなものになってしまいます（私は嫌いです）

<style>
  td.pic_frame {
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
 } 
</style>
<table><tr><td class="pic_frame"><img ...></td></tr></table>

dylanfmが提案したCSSテーブルを使用してこれを試しました

<style>
  div.pic_frame{
    display:table-cell;
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
  }
</style>
<div class="pic_frame"><img ...></div>

IE7を除いて、すべてのブラウザで完全に機能します。

（Firefox、Safari、Opera、Chrome、IE7でテスト済み）

于 2009-01-26T10:32:48.487 に答える
1 
<div style='float:left;width:200px;height:300px;'>Left column</div>
<div style='margin-left:200px;'>
    <div>Right top</div>
    <div>Right bottom</div>
</div>

みたいなのが欲しいと思います。css のfloat機能は素晴らしいことを覚えておいてください。これはほんの一例です。

于 2009-01-24T23:00:03.277 に答える
1

positionプロパティを使用した別のソリューション:

<style type="text/css">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .left-column {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #F88;
    }
    .right-top {
        margin-left: 50%;
        background-color: #8F8;
    }
    .right-bottom {
        margin-left: 50%;
        background-color: #88F;
    }
</style>


<div class="outer">
    <div class="left-column">Left column</div>
    <div class="right-top">Right top</div>
    <div class="right-bottom">Right bottom</div>
</div>
于 2009-01-24T23:50:54.267 に答える
1

テーブルのようなレイアウトを作成する方法は他にもたくさんあります。CSS テーブルもあります。実際、レイアウトにテーブルを使用する理由はありません。これまで。

現時点でできないことは適切ですtext-align: justify;ハイフネーションは適切に機能しませんが、ソフトハイフンを使用すると、かなり適切に動作するようになると思います。

于 2009-01-24T23:51:43.610 に答える
0

負のマージンで画像を垂直方向に中央揃えできます。負のマージンを使用して、画像の「アンカー ポイント」を中央に移動します。次に、画像を中央に相対的に配置します。

800x800 画像の例:

#centered
{
    position:absolute;
    top:50%;
    left:50%;
    height:800px;
    width:800px;
    margin: auto;
    margin-top:-400px;
    margin-left:-400px;
}
于 2009-01-28T11:05:23.507 に答える