Question

我正在尝试仅使用div元素创建带有比例表的HTML页面。我希望左列占表宽度的60％，并有3行。对于第二列，我希望它占用表宽度的其余40％，并有4行，每行有2个单元格。

这是我的HTML标记：为什么我只看到第一列（左）？

Content-Type

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #DDDDDD;
}

#MasterDiv {
  display: table;
  height: 100%;
  width: 100%;
}

.left {
  display: table-column;
  width: 60%;
}

.right {
  display: table-column;
  width: 40%;
}

.A {
  height: 30%;
  display: table-row;
}

.B {
  height: 35%;
  display: table-row;
}

.B2 {
  height: 25%;
  display: table-row;
}

.C1 {
  display: table-cell;
  background: #ff00ff;
}

.C2 {
  display: table-cell;
  background: #ffffff;
}

.C3 {
  display: table-cell;
  background: #0000ff;
}

.C4 {
  display: table-cell;
  background: #ff0000;
}

.C5 {
  display: table-cell;
  background: #00ff00;
}

.C6 {
  display: table-cell;
  background: #000000;
}

Answer 1

您需要将行和列嵌套在左右div中。目前，您在声明左右，但其中没有内容，并且table和div元素混合在一起可能会使事情变得混乱。

我已经对您上述内容做了一个仅div的示例。左侧的“行” div占“右侧”宽度的100％，“拆分列”占“右侧”宽度的50％。高度基于内容，但是如果要指定高度，可以通过添加id或类来实现。

.container {
  width: 100%;
  font-family: Helvetica, Sans-Serif;
}

.left,
.right,
.split-column {
  float: left;
  background-color: #f9f9f9;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
}

.split-column {
  width: 50%;
  background-color: lightblue;
}

<div class="container">
  <div class="left">
    <div class="row">
      row 1
    </div>
    <div class="row">
      row 2
    </div>
    <div class="row">
      row 3
    </div>
  </div>
  <div class="right">
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
    <div class="split-column">
      cell 1
    </div>
    <div class="split-column">
      cell 2
    </div>
  </div>

Answer 2

尝试

http://www.cssdesk.com/5wSVE

我从TJ Hannington answser中添加了一些CSS

尝试使用div创建比例表

2 个答案: