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

Question

我来自iOS背景，无法在HTML中使用CSS布局元素。我想创建一些“简单”的东西：

我希望能够在单独的div中拆分屏幕，但让所有的fieldset彼此对齐。 （它们是字段集，但我没有在我的原始模型中绘制它们。我也没有在第三个框中放置任何东西，但那里有更多东西）。

但这是我的一些问题：

方框1问题： 我的所有元素基本上都有style="display:block;"。如果我有style=display:block这样的总体div，我就不会得到同样的效果。有没有更好的方法呢？

方框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>