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