Question

在这4小时后，我想我必须宣布自己被击败。我不能尝试任何浮动，位置等样式来尝试获得我想要的布局。
如果有人可以在剩下的时间里拯救我并且头疼，在没有桌子的HTML中创建这个布局，我将永远感激不尽：
alt text http://img142.imageshack.us/img142/4695/form2.jpg

提前谢谢!!!

Answer 1

尝试这样的事情：

<style type="text/css">
.left {
    height: 100%;
    width: 20%;
    float: left;
    border: 1px solid black;
}
.right {
    height: 100%;
    width: 70%;
    float: left;
    border: 1px solid black;
    border-left: 0px solid black;
}
.wrap {
    width: 750px;
    height: 100px;
    border: 0px solid black;
}
.top {
    height: 25%;
    border-bottom: 1px solid black;
}
.bottom {
    border-top: 1px solid black;
}
.middle {
    height: 50%;
}
</style>
<div class="wrap">
    <div class="left">Left content</div>
    <div class="right">
        <div class="top">Top</div>
        <div class="middle">Middle</div>
        <div class="bottom">Bottom</div>
    </div>
</div>

边框很杂乱，宽度也是如此，但显然可以自定义。：P

Answer 2

作为Salty花车的替代品，您可以尝试"no float" method。

例如（注意，我没有测试过这个代码跨浏览器，但它是我为内部使用而构建的no-float布局构建器的 modified 输出，它经历了很多浏览器过去的测试;还要注意IE 6-7将不获得类似于表格的布局的好处，如果没有使用CSS表达式，列将不会是完整的高度...如果你可以预先确定高度，这很容易被克服），

<强> CSS：

/* No-float */

/* Equivalent to <table> */
.lr {
    display: table;
    position: relative;
    table-layout: fixed;
    padding: 0;
    margin: 0;
    width: 100%;
    border-collapse: separate;
}

/* Equivalent to <tr> */
.lcc {
    display: table-row;
    padding: 0;
    margin: 0;
}

/* Equivalent to <td> */
.lc {
    display: table-cell;
    padding: 0 1px 0 0;
    vertical-align: top;
}

/* <div> within cell to make styles across browsers more uniform */
.lccc {
    position: relative;
    top: 0;
    left: 1px;
    width: 100%;
    height: 100%;
    padding: 1px 0 0 1px;
    margin: 0 -1px;
}
/* Adjust positioning in .lccc */
.content {
    margin: -1px 0 0 -1px;
    *margin: 0;
}

/* IE 6-7 compat */
.lr, .lcc {
    *display: block;
    *word-wrap: break-word;
    *overflow-x: hidden;
}
.lc {
    *display: inline;
    *zoom: 1;
    *width: 100%;
    *height: 100%;
    *line-height: inherit;
    *word-wrap: break-word !important;
    *overflow-x: hidden;
    *margin-right: -1px;
}
.lccc {
    *margin: -1px 0 0 -2px;
    z-index: 2;
}



/* Custom stuff */

.label {
    width: 200px;
    text-align: right;
}
.field {
    width: 550px;
}
.field .content {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

form .lr {
    width: 750px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

form .lc {
    border: 1px solid #000;
}

/* Top and left padding are +1 */
form .lccc {
    padding: 16px 0 15px 1px;
}
form .content {
    padding: 10px;
}

<强> HTML：

<form>
    <div class="lb lr">
        <div class="lcc">
            <div class="lb lc label">
                <div class="lccc">
                    <div class="content">
                        <label for="field1">Field 1</label>
                    </div>
                </div>
            </div>
            <div class="lb lc field">
                <div class="lccc">
                    <div class="content">
                        <input id="field1" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lb lr">
        <div class="lcc">
            <div class="lb lc label">
                <div class="lccc">
                    <div class="content">
                        <label for="field2">Field 2</label>
                    </div>
                </div>
            </div>
            <div class="lb lc field">
                <div class="lccc">
                    <div class="content">
                        <textarea id="field1" rows="10" cols="50"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Answer 3

这是一篇关于为表格布局使用div标签和CSS的文章：

http://www.pixel2life.com/publish/tutorials/33/converting_tables_to_a_css_div_tag_and_xhtml_validated_layout/

无表格式布局

3 个答案: