8

代わりに、このレイアウトを 2 つの 50% 列幅で使用しようとしています。しかし、右側の列が「最小幅」に達すると、左側の列の下に移動するようです。「シム」手法を使用して最小幅をラッパーに設定し、両方の列のサイズ変更を停止する方法はありますか? したがって、右の列が左の列の下にあるという問題が解消されます。

マイページは以下の通りです。

<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
}

</style>

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
    <div class="minwidth">&nbsp;</div>
</div>

問題は、左の列のサイズ変更が停止することですが、右の列が左の列の下に移動し、サイズが変更され続けることです。基本的に、私が望む効果は、ラッパーの幅がベローになると、左と右の両方の列のサイズ変更も停止することです。左右両方の列にシムを入れてもうまくいきませんでした。

2 つの 50% 幅の列を取得し、シムを使用して最小幅を適切に設定する別の方法はありますか?

ありがとうございました。

編集: minwidth クラスの空白は実際には   ですが、変換されました。;)

4

8 に答える 8

6

CSS Play の Stu Nicholls による手法に基づいて、「HTML テーブルを必要としない」ソリューションを思いつくことができました。IE6+ と FF2+ で動作するだけでなく、有効な CSS であり、動作しないため、個人的に気に入っています。ハックが必要です。HTML テーブルよりも CSS ベースのレイアウトが望ましい理由に関する私の議論については、以下を参照してください。

まず、CSS を使用して新しいページをデザインする場合は、標準に準拠したブラウザー モードで行うことをお勧めします。quirksmode と標準準拠モードの説明については、お気に入りの CSS リソース サイトの 1 つにあるこの記事を参照してください。ページの上部に特定の DOCTYPE 要素を追加するだけです。その後、CSS は標準準拠モードで強制的にレンダリングされるため、バグやブラウザーの特異性が少なくなります。標準準拠モードに切り替えることができない場合は、CSS Play でも利用可能な quirksmode のブラウザー用の最小幅のソリューションがあります。

次に、既存のマークアップにラッパーを追加する必要があります。このラッパーは、最小幅を理解する (IE ではなく) ブラウザーの最小幅を設定するために使用されます。次に、* html トリックを使用して IE 6 を具体的にターゲットにし、Stu Nicholl の手法を内部ラッパーに適用できます。テクニックの詳細はこちらで、使用されている具体的な例は「#2 標準準拠モードの IE の場合」です。

http://www.cssplay.co.uk/boxes/minwidth.html

最終的な結果はかなり単純です。元の質問に記載されている2 列の ALA スタイル手法を使用して 2 つの 50% 列を作成します。これらの列は全体の最小幅 (この例では 500px) で、列のサイズ変更が停止し、右の列が左の列を下回らないようになっています。これが役立つことを願っています！

編集:これと同じ手法を使用して、クロスブラウザー互換の最小幅を何にでも適用できます。たとえば、列はそれぞれ 50% である必要はなく、任意の数の列を使用できます。http://www.glish.com/css/は、CSS ベースのページ レイアウトの優れたリソースであり、この最小幅テクニックと組み合わせると、最小限の有効な CSS で作成できる多くの優れたレイアウトがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">

        /* For browsers that understand min-width */
        .width {
            width: 100%;
            min-width: 500px;
        }

        /* IE6 Only */
        * html .minwidth {
            border-left: 500px solid white;
            position: relative;
            float: left;
        }

        /* IE6 Only */
        * html .wrapper {
            margin-left: -500px;
            position: relative;
            float: left;
        }

        .left {
            float: left;
            width: 50%;
        }

        .right {
            float: left;
        }

    </style>
</head>
<body>

<div class="width">
    <div class="minwidth">
        <div class="wrapper">
            <div class="left">
                Left
            </div>
            <div class="right">
                Right
            </div>
        </div>
    </div>
</div>

</body>
</html>

さて、Stack Overflow アカウントを設定する動機は、「2 つの列が必要な場合は、Div をテーブルのように動作させるのではなく、テーブルを使用する」という以下の提案に対応できることでした。私は新人すぎてコメントしたり反対票を投じたりできないので、この議論を増やしています。

本当に？

誰かが CSS ベースのレイアウトについて質問し、HTML テーブルを使用するように答えますか?

まず、HTML テーブルが完全に不要であるとは考えていません。実際、表形式のデータ、つまりリレーショナル データを表示する必要があるときはいつでも、HTML テーブルを使用します。CSS テーブルの表示プロパティはまだ完全にはサポートされていません (IE8 で近日公開予定です)。単一レベルのHTML テーブルを使用するのが効果的な解決策です。Google の Web ページのマークアップを見てみると、それらが同意することがわかります。

テーブルを使用して 10 分で完了できるクロスブラウザー互換の CSS ベースのレイアウトを作成することに多くの時間を費やしてきた人として、この問題にはもっと簡単な解決策があることに同意します。ただし、ダイナマイトを使用してキッチンを改装できるからといって、そうすべきであるとは限りません。次の記事では、CSS ベースのレイアウトがより望ましい理由について詳しく説明しています。

http://www.chromesites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/

于 2008-10-23T15:21:12.377 に答える
1

スタイルのためにこれを試してください：

.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }
于 2008-10-10T14:20:38.480 に答える
1

ラッパーの最小幅を設定し、左右の列をパーセンテージに変更するだけです。これにより、2つの列が互いに押し込まれたり、上下に押し込まれたりするのを防ぐことができます。

于 2008-10-10T14:21:46.577 に答える
1

これは簡単な試みですが、機能します（Firefoxでのみテスト済み）：

<head>
<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    min-width: 500px;
    background:#eee;
    height: 0;
    overflow:visible;
}
.col{
    min-width:250px;
    background:#eaa;
}

</style>
</head>
<body>
<div id="wrapper" class="minwidth">
    <div id="left" class="col">
        left
    </div>
    <div id="right" class="col">
        right
    </div>
    <div><!-- Not needed --></div>
</div>
</body>
于 2008-10-10T14:22:57.040 に答える
1

これを試して：

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">

.floatme {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
    clear: both;
}

</style>


<body>
<div id="wrapper">
    <div class="floatme">
        left
    </div>
    <div id="floatme">
        right
    </div>
    <div class="minwidth"> </div>
</div>
</body>
</html>
于 2008-10-10T14:27:17.937 に答える
1

これは、私が思うあなたの望みの良い例です。

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

簡単に言えば、CSSは次のとおりです。

/* Start of Column CSS */
#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#ffa7a7; /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:#fff689; /* column 1 background colour */
}
#col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

html は次のとおりです。

<div id="container2">
    <div id="container1">
        <div id="col1">
            <!-- Column one start -->
            <h2>Equal height columns</h2>
            <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>

            <h2>Valid XHTML strict markup</h2>
            <p>The HTML in this layout validates as XHTML 1.0 strict.</p>
            <!-- Column one end -->
        </div>
        <div id="col2">
            <!-- Column two start -->
            <h3>Windows</h3>
            <ul>
                <li>Firefox 1.5, 2 &amp; 3</li>
                <li>Safari</li>
                <li>Opera 8 &amp; 9</li>

                <li>Explorer 5.5, 6 &amp; 7</li>
                <li>Google Chrome</li>
                <li>Netscape 8</li>
            </ul>


            <!-- Column two end -->
        </div>
    </div>
</div>
于 2009-10-25T22:41:55.740 に答える
0

政治的な議論には入りたくありませんが、Agoudzward による「CSS がテーブルよりも優れている理由」に関する引用記事の推論は、テーブルとはほとんど関係がありません。多くのページ要素が同じスタイルを要求する場合に、個別のフォント タグや色設定などを何度も使用するよりも、CSS の方が優れていることを示しています。はい、ページに 100 個の要素があり、すべてが緑色の 14pt の Arial テキストである必要がある場合、フォント タグを何度もコピーして貼り付けるよりも、このための CSS スタイルを作成する方が非常に理にかなっています。 、彼らが与えるすべての理由から。複数のページで同じスタイルが必要な場合は、2 倍になります。

しかし、それはテーブルと何の関係があるのでしょうか?

その理由は、「CSS は、フォントと色を繰り返しではなく 1 回指定できるので優れているため、CSS で実行できることは、考えられる代替手段よりも優れている」と思われます。まあ、それはまったく続きません！ツールが 1 つのタイプの問題に適しているからといって、考えられるすべての問題に適しているとは限りません。ハンマーは釘を入れるのに最適です。ネジを入れるために使っているわけではありません。div や CSS タグを使用するよりもテーブルを使用する方が簡単かつ論理的にレイアウトを作成できる場合、それでも「CSS は優れている」という理由で CSS を使用する必要があると主張すると、次のようになります。

于 2009-10-14T14:10:19.983 に答える
-4

2列のテーブルを使用します。それはあなたが望むことを正確に行います。Divは、論理的に異なるブロックを単純に分割するために使用されることになっており、テーブルは列化されたデータをレイアウトするためにあります。2つの列が必要な場合は、Divをテーブルのように動作させるのではなく、テーブルを使用してください。

于 2008-10-10T14:16:46.867 に答える