web-dev-qa-db-ja.com

HTMLの<table>レイアウトの代替

現在、ブラウザウィンドウのサイズと正確に一致するように設定されたWebページがあり、その中にいくつかのoverflow:scrollがあります。

基本的に、ページはテーブルの2列と3行に配置されます。スタイル/フォーマットにテーブルを使用したくないので、この移行をどのように行うかが私の質問です。

私のページ（一言で言えば）：

<table>
<tr>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff1
            </div>
            <div>
                stuff1A
            </div>
        </div>
    </td>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff2
            </div>
            <div>
                stuff2A
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
           <input type="submit"><input type="submit"><input type=    "submit">
    </td>
    <td>
           <input type="submit"><input type="submit"><input type="submit">
    </td>
</tr>
<tr>
    <td>
    <textarea>stuff3</textarea></td>
    <td><select multiple>
        </select></td>
</tr>

問題は本質的に、改行に2番目のネストされた<div>を配置せずに<div>sをネストしたいということです。

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div>
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div>

上記で同じ行に2つのスクロール可能な領域を表示したいのですが、テキストは複数の色である必要があるため、<textarea>を使用できません（提供されているリンクを参照）。

興味のある人にとっては、このページは最終的に、大学のCS部門向けの完全にブラウザ内のインスタントメッセージ技術サポートシステムのスタッフ側になります。

htmlhtml-table
13
jamesbtate

これを行う基本的な方法は、ページを6つに分割することです<div>s：

<div class="left" id="l1">1</div>
<div class="right" id="r1">2</div>
<div class="left" id="l2">3</div>
<div class="right" id="r2">4</div>
<div class="left" id="l3">5</div>
<div class="right" id="r3">6</div>

次に、CSSを記述します。

div.left {
    float: left;
    clear: both;
}

そして、あなたは次のようなものを手に入れるべきです：

1   2

3   4

5   6

ネストされていない<div>必要です。

20
Mike D.

新しいCSSグリッドオプション：

<style>
#grid {
    display: grid;
    grid-template-columns: 20% 20% 20%;
}
</style>

<div id="grid">
    <div>first</div>
    <div>second</div>
    <div>thrid</div>
    <div>fourth</div>
    <div>fifth</div>
    <div>sixth</div>
    <div>seventh</div>
    <div>eighth</div>
    <div>nineth</div>
</div>
3
dhiman

通常、コンテンツをセマンティックにマークアップしてから、スタイルを設定する必要があります。

5つの主要な領域があるようです。

  • メッセージ
  • ユーザーリスト
  • コントロール
  • 入力
  • チャットルーム

マークアップを作成しましょう：

<div class="left">
    <div id="messages">
        messages
    </div>
    <div id="user-list">
        user-list
    </div>
</div>
<div id="controls">
    controls
</div>
<div class="left">
    <div id="input">
        input
    </div>
    <div id="chatrooms">
        chatrooms
    </div>
</div>

そして少しスタイル：

.left{
    clear:both;
}
    .left div{
        float: left;
    }
#controls{
    clear: both;
}

そして、あなたはここからそれを完了することができるはずです。ほとんどのCSSレイアウトの最も重要な部分は、適切なフローティングです。

3
Eli

リンクをありがとう、それは多くを説明します。おなじみのように聞こえますが、これは以前に行ったことがありますが、かなり注意が必要です。

たくさん説明する前に、これでIE6をサポートしたいかどうかを知る必要があります。もしそうなら、ボーダーボックスボックスモデルが必要になるので、おそらくIE癖モードに戻す必要があります（IEでは別の方法で選択することはできませんが、そうではありません） topプロパティとbottomプロパティの両方を使用できます。その場合は、他のすべてのブラウザもこのボックスモデルに配置することをお勧めします。これにより、=に対して2つの別々のスタイルシートを作成する必要がなくなります。 IEと残りの部分（もちろん、まだいくつかの回避策が必要です）。要するに、この異なるボックスモデルを使用した後、border-topを使用してスタイリングすることで準上部と下部のプロパティを持つことができます代わりに、border-bottomです。これらは、指定された高さ（たとえば、ビューポートの100％）内にあるため、上下のように機能します。これが少なくとも少し理解できることを願っています。

そうでない場合は、少し簡単で、固定位置と<div>を使用してスタイルを設定できます。topおよびbottomプロパティを取得します。 IIRC、これはIE7 +でも機能するはずです。

しかし、最初に、バグのあるもののサポートが必要かどうかを教えてください...

1
Marcel Korpel

EliとMikeD。の回答の問題は、この質問を正しく理解した場合、puddingfoxは3つのdivをビューポートの合計サイズ全体に広げたいということです。その場合、IE6のコーディングで問題が発生します。これは、同じ要素でtopプロパティとbottomプロパティの両方を使用できないためです（これは中央のdivに必要です）。

1
Marcel Korpel