css - 没有明确行或列结构的 div 或表格布局

Question

我尝试使用 div-containers（带有信息的表单）构建以下结构。我只是不明白。没有明确的列或行系统。有任何想法吗？

+++++++++++++++++++++++++
+       +       b       +
+   a   +++++++++++++++++
+       +   c   +       +
+++++++++++++++++   d   +
+       e       +       +
+++++++++++++++++++++++++

我应该提到，a 和 d 的宽度是固定的（a 左对齐，d 右对齐）并且 b、c、e（它们都是左对齐）的宽度应该随内容而变化。

Answer 1

的用途rowspan和colspan性质td。

例子：

<table border="1">
    <tr>
        <td rowspan="2">a</td>
        <td colspan="2" rowspan="1">b</td>
    </tr>
    <tr>
        <td>c</td>
        <td rowspan="2">d</td>
    </tr>
    <tr>
        <td colspan="2">e</td>

    </tr>
</table>

JSFiddle

Answer 2

这是一个首发：http: //jsfiddle.net/asxde/

您可能需要也可能不需要某些元素固定宽度，这取决于您的精确设计和约束。特别是 A 和 D。

CSS：

div {
    outline: 1px solid red;
    min-width: 100px;
    min-height: 40px;
}
.a {
    float: left;
    min-height: 80px;
}
.b {
    overflow: hidden;
    background-color: lightgreen;
}
.c {
    float: left;
}
.d {
    float: right;
    min-height: 80px;
}
.e {
    float: left;
    clear: left;
    min-width: 300px;
}

HTML：

<div class="a">aaa</div>
<div class="b">bbb</div>
<div class="c">ccc</div>
<div class="d">ddd</div>
<div class="e">eee</div>

Answer 3

http://jsfiddle.net/tPJAQ/

这是从上面 FAngel 的答案中衍生出来的一种方法。

.wrapper{
    height:/*250px*/ 100%;
    width:/*250px*/ 100%;
    overflow: visible;
    border:solid 1px black;
    box-sizing: border-box;
}
.a {
    height:66.666666%;
    width:33.333333%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}
.b {
    height:33.333333%;
    width:66.666666%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}
.c {
    height:33.333333%;
    width:33.333333%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}
.d {
    height:66.666666%;
    width:33.333333%;
    float:right;
    border:solid 1px black;
    box-sizing: border-box;
}
.e {
    height:33.333333%;
    width:66.666666%;
    float:left;
    border:solid 1px black;
    box-sizing: border-box;
}

Answer 4

您需要绝对定位所有内容：

#a,#b,#c,#d,#e {
    position: absolute;
}
#a {
    left: 0;
    top: 0;
}
#b {
    left: 100px;
    top: 0;
}
#c {
    left: 100px;
    top: 100px;
}
#d {
    left: 200px;
    top: 100px;
}
#e {
    left: 0;
    top: 200px;
}

http://jsfiddle.net/gyxJJ/1/

Answer 5

请参阅此演示： http: //jsfiddle.net/T9Vvg/您可以使用类似的东西。

CSS：

.wrapper{
    height:150px;
    width:150px;
    border:solid 1px black;
}
.a {
    height:98px;
    width:48px;
    float:left;
    border:solid 1px black;
}
.b {
    height:48px;
    width:98px;
    float:left;
    border:solid 1px black;
}
.c {
    height:48px;
    width:48px;
    float:left;
    border:solid 1px black;
}
.d {
    height:98px;
    width:48px;
    float:right;
    border:solid 1px black;
}
.e {
    height:48px;
    width:98px;
    float:left;
    border:solid 1px black;
}

HTML：

<div class=wrapper>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
</div>