html - 在不使用内联样式的情况下布局 html 元素

Question

我来自 iOS 背景，在 HTML 中布局元素和使用 CSS 时遇到了麻烦。我想创建像这样“简单”的东西：

我希望能够将屏幕拆分为单独的 div，但让所有字段集相互对齐。（它们是字段集，但我没有在我的原始模型中绘制它们。我也没有在第三个盒子里放任何东西，但里面还有更多东西）。

但这里有一些我的问题：

方框 1 问题：我的所有元素基本上都有style="display:block;"。如果我有一个总体 div 作为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>

Answer 1

你的标题说明了一切，不要使用内联样式，否则它很快就会变得一团糟。创建一个外部样式表来保存所有 CSS，以及以 CSS 选择器为目标的元素样式组。

从简化结构开始。你有三列，所以三个 div。包装它们也是一个好主意：

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

所以你希望它们并排。浮动它们或使用inline-block元素是实现这一目标的两种常用技术。您尝试同时使用两者，请选择一个。我将举一个浮动的例子：

#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; }

我希望这能给您一个可以应用于其他专栏的总体思路。

Answer 2

这正是 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>