Question

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

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

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

Answer 1

使用rowspan的{{1}}和colspan属性。

示例：

td

JSFiddle

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

你想要绝对定位一切：

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

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

5 个答案: