Question

我想通过<div>生成下面的代表。约束：

完整尺寸= 100％
第一列+第二列= 50％，第三列+第四列= 50％
第一列小于第二列，第二列占据“其余地方”，第3列和第4列相同：）
第3行，合并2个单元格
最后一行合并4个单元格
不要担心颜色：）

PS：没有辩论表vs div; - ）

alt text

Answer 1

这是我建议的标记：

<div class="row">
  <div class="col half">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
  <div class="col remainder">
    <div class="col narrow">(1)</div>
    <div class="col remainder">(2)</div>
  </div>
</div>
<div class="row">
  <div class="col half">(3)</div>
  <div class="col remainder">(3)</div>
</div>
<div class="row">
  (4)
</div>

风格：

/* structure */
.row { clear: both; overflow: hidden; }
.col { float: left; }
.half { width: 50%; }
.narrow { width: 30%; }
.remainder { float: none !important; overflow: hidden; }

/* skin: just for demo */
.row { text-align: center; border-bottom: 1px solid #999; }
.half { background: #fcc; }
.narrow { background: #ccf; }
.remainder { background: #cfc; }

前两行被分成两半。在每一半中有两个单元格：第一个被称为narrow并且是浮动的。我为这个演示的宽度加了30％（注意：那是行的一半的30％）。另一列名为remainder，不浮动。它使用overflow来设置自己的渲染上下文，这意味着它将块填充到浮动列的右侧。

您可以拥有更多浮动列（左侧或右侧），但只有一个余数。

我把它放了on jsfiddle：玩它。

Answer 2

很抱歉误读，我之前的答案是在你想使用DIV时使用TABLE。另请注意，如果要使用边框，则必须偏移宽度百分比。（此页面上的其他答案可能无法正确显示）

<style type="text/css">
.wrapper { width:100%; background-color:#ddd; text-align:center; float:left;}
.quarter-row { width:25%; background-color:#bbb; float:left;  }
.half-row { width:50%; background-color:#999; float:left; }
.full-row { width:100%; background-color:#777; float:left; }
</style>

<div class="wrapper">
  <div class="quarter-row">1</div><div class="quarter-row">2</div><div class="quarter-row">3</div><div class="quarter-row">4</div>
  <div class="half-row">1 (50% width)</div><div class="half-row">2 (50% width)</div>
  <div class="full-row" >1 (100% width)</div>
</div>

Answer 3

在这里，试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <style type="text/css">
    div.row { width: 99.9%; border: 1px solid black; height: 1em;}
    div.cell2 {border: 1px solid black; height: 1em; width: 49.9%; float: left;}
    div.cell4 {border: 1px solid black; height: 1em; width: 24.9%; float: left;}
    </style>
</head>
<body>
    <div class = "row">
    </div>
    <div class = "row">
    </div>
    <div class = "cell2"></div><div class = "cell2"></div>
    <div class = "cell4"></div><div class = "cell4"></div>  <div class = "cell4"></div><div class = "cell4"></div>

</body>
</html>

样式位于标题中，但它确实应该在自己的CSS文件中。

使用<div> </div>生成“表”

3 个答案: