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

Question

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

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

我应该提到的是，a和d被固定在宽度（对准的左，D右对齐）和b，C，E（它们是所有左对齐）应在宽度随内容而异。

Answer 1

你要绝对定位的一切：

#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 2

看到这个演示：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> 

Answer 3

使用编号为td的和colspan属性。

例子：

<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 4

这里有一个首发：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 5

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