0

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

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

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;
}
<div id="MasterDiv">
  <div class="left"></div>
  <div class="right"></div>
  <div class="A">
    <div class="C1"></div>
  </div>
  <div class="B">
    <div class="C2"></div>
  </div>
  <div class="B">
    <div class="C3">
    </div>
  </div>
  <div class="B2">
    <div class="C1"></div>
    <div class="C2"></div>
  </div>
  <div class="B2">
    <div class="C3"></div>
    <div class="C4"></div>
  </div>
  <div class="B2">
    <div class="C5"></div>
    <div class="C6"></div>
  </div>
  <div class="B2">
    <div class="C4"></div>
    <div class="C6"></div>
  </div>
</div>

4

2 回答 2

1

您需要将行和列嵌套在左右 div 中。目前，您正在声明 left 和 right，但其中没有内容，并且 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>

于 2019-04-24T09:44:10.017 回答
1

试试这个

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

我从 TJ Hannington answser 添加了一些 css

于 2019-04-24T09:52:02.170 回答