2

私は iOS のバックグラウンドから来ており、HTML での要素のレイアウトと CSS の使用に問題があります。次のように「シンプル」なものを作成したいと思います。

ここに画像の説明を入力

画面を個別の div に分割できるようにしたいが、すべてのフィールドセットを互いに揃えたい。(それらはフィールドセットですが、プリミティブ モックアップでは描画しませんでした。また、3 番目のボックスには何も入れませんでしたが、そこにはさらに多くのものがあります)。

しかし、ここに私の質問のいくつかがあります：

ボックス 1 の質問: 私は基本的style="display:block;"にすべての要素を持っています。包括的な div as がある場合style=display:block、同じ効果は得られません。それを行うより良い方法はありますか？

ボックス 2 の一般的な質問: 表示されているイメージを実現するために、すべてのスタイルをハードコーディングすることになりました。非常に使いやすく、スケーラブルではないようです。私が始めるべき一般的なプリンシパルはありますか？

<div style="display:inline-block; vertical-align:top; float:left; width:25%">
    <fieldset>
        <legend>First fieldset</legend>
        <div style="display:block;">field 1
            <input type="text" style="display:block;" />
        </div>
        <div style="display:block;">field 2
            <select style="display:block;">
                <option>field 2 options</option>
            </select>
        </div>
        <div style="display:block;">field 3
            <input type="text" style="display:block;" />
        </div>
    </fieldset>
</div>
<div style="display:inline-block; vertical-align:top; width:33%">
    <fieldset>
        <legend>Second fieldset</legend>
        <div style="clear:both"></div>
        <div class="one-half" style="display:inline-block; float:left;">
            <input type="radio" name="scoops" />Single
            <div style="display: block">Radio 1</div>
            <div style="display: inline">Radio 2
                <input type="text" />
            </div>
            <div style="display: block">
                <input type="checkbox" />Radio 3</div>
        </div>
        <div class="one-half" style="display:inline-block;">
            <input type="radio" name="scoops" />Double
            <div style="display: block">Blah 1</div>
            <div style="display: inline">Blah 2
                <input type="text" />
            </div>
            <div style="display: block">
                <input type="checkbox" />Blah 3</div>
        </div>
    </fieldset>
</div>
4

2 に答える 2

1

タイトルがすべてを物語っています。インライン スタイルを使用しないでください。すぐに混乱してしまいます。すべての CSS と、CSS セレクターの対象となる要素のスタイル グループを保持する外部スタイルシートを作成します。

構造を単純化することから始めます。3 つの列があるため、3 つの div があります。それらもラップすることをお勧めします。

<div id="wrapper">
    <div id="col1"></div>
    <div id="col2"></div>
    <div id="col3"></div>
</div>

したがって、それらを並べて表示する必要があります。それらをフローティングするか、inline-block要素を使用することは、それを達成するための 2 つの一般的な手法です。両方を同時に使用しようとしました。どちらかを選択してください。フローティングの例を挙げます：

#wrapper { overflow: hidden; } /* clear the floats at the end, 
                                  so the wrapper extends down  */
#col1, #col2, #col3 { float: left; }
#col1 { width: 25%; }
#col2 { width: 33%; }

また、すべてのフィールドをラップする div は必要なく、手動で div を作成する必要もありませんblock(デフォルトではブロックであり、フィールドセットもそうです)。ラベルを使用して、それらもブロックにします。

<fieldset>
    <legend>First fieldset</legend>
    <label for="fld1">field 1</label>
    <input id="fld1" type="text">

    <label for="fld2">field 2</label>
    <select id="fld2">
        <option>field 2 options</option>
    </select>

    <label for="fld3">field 3</label>
    <input id="fld3" type="text">
</fieldset>

そして、それらをすべてブロックにします:

label, input, select { display: block; }

これにより、他のコラムに適用できる一般的なアイデアが得られることを願っています。

于 2013-05-21T03:50:28.650 に答える
0

これはまさに CSS クラスの目的です: http://www.w3schools.com/css/css_id_class.asp

手始めに、左セクションと右セクションのクラスを次に示します。

.left {
    display:inline-block;
    vertical-align:top;
    float:left;
    width:25%;
}
.right {
    display:inline-block;
    vertical-align:top;
    width:33%;
}

使用中: http://jsfiddle.net/basarat/BM6Fp/#base

<div class="left">
    <fieldset>
        <legend>First fieldset</legend>
        <div style="display:block;">field 1
            <input type="text" style="display:block;" />
        </div>
        <div style="display:block;">field 2
            <select style="display:block;">
                <option>field 2 options</option>
            </select>
        </div>
        <div style="display:block;">field 3
            <input type="text" style="display:block;" />
        </div>
    </fieldset>
</div>
<div class="right">
    <fieldset>
        <legend>Second fieldset</legend>
        <div style="clear:both"></div>
        <div class="one-half" style="display:inline-block; float:left;">
            <input type="radio" name="scoops" />Single
            <div style="display: block">Radio 1</div>
            <div style="display: inline">Radio 2
                <input type="text" />
            </div>
            <div style="display: block">
                <input type="checkbox" />Radio 3</div>
        </div>
        <div class="one-half" style="display:inline-block;">
            <input type="radio" name="scoops" />Double
            <div style="display: block">Blah 1</div>
            <div style="display: inline">Blah 2
                <input type="text" />
            </div>
            <div style="display: block">
                <input type="checkbox" />Blah 3</div>
        </div>
    </fieldset>
</div>
于 2013-05-21T03:21:25.050 に答える