0

私は流動的なレイアウトを設計しており、レイアウトをコーディングするための正しいアプローチを考えています..以下は私が考えている構造です;

<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>

CSSについては、コンテナを {width:90%;margin:0 auto;overflow:hidden} としてコーディングすることを考えています

2 つの列の場合、いくつかの % 幅で左にフロートされます。

ご覧のとおり、流動的なレイアウトが必要なので、px 値をどこにも使用していません。

私の他の要件は次のとおりです。

1 ビューポートに基づいて自動的に調整する必要があります。たとえば、同じ html ページをデスクトップまたは iPad (ある程度携帯電話) で表示すると、ビューポートに比例して調整する必要があります。

2 ほとんどのデスクトップ ブラウザと iPad で互換性があり、将来的には他のタブレット向けに簡単に拡張できる必要があります。

3 ページは中央揃えで表示されます (iPad に十分なスペースがあるかどうかはわかりません)。

上記の構造または css が原因であると思われる問題を指摘してください。

私の HTML と CSS コード (特にコンテナ) が正しくコーディングされているかどうかを提案してください..同じことがほぼ 500 以上の html に適用されるため、これを正しく行うことについて少し不安です...だから取得したくない後の段階であらゆる種類の主要な問題に..

できるだけ多くのアイデアを提案してください..私はそれらすべてを受け入れます..

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

4

1 に答える 1

0

柔軟であるという点で、これは非常に簡単に行うことができます。

（私は今怠惰なので、スタイルをインラインのままにしました！）

    <div id="container" style="width:90%; margin:0 auto; overflow:hidden">
        <div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div>
        <div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div>
    </div>

ビューポートの 90% でコンテナーの 90% の幅。列は、計算された 90% の幅の 50% になります。

私はマスターページなどを使用するので、実際に変更する必要がある場合は、各 html ページに適用する必要があります:)

また、列は流動的ですが、コンテンツが最小幅を決定する可能性があります。たとえば、1 つの列に 500 ピクセル幅の画像がある場合、サイズを変更するとその列の最小幅が 500 ピクセルになり、問題が発生する可能性があります。つまり、サイトのコンテンツの種類と、それがレイアウトにどのように影響する可能性があるかを考慮する必要があります。

于 2011-09-07T17:07:01.470 に答える