第二列成行

Question

我的编码到处都是，所以到目前为止我没有任何示例。期待重新开始。我似乎只找到如何将所有列转换为行，而我只希望第二列这样做。

我想要结束的例子：

我想 div table 有两列，右边的一列 div 分成两行

由于站点限制，我无法使用 javascript 等。

我一直在努力寻找它，但由于远离编码和大脑中的苔藓太久，我无法将它组合在一起。

求助！请！

Answer 1

如果您想避免使用 [=16]，您可以在容器 <div> 上使用 display: table;，在子 <div> 上使用 display: table-cell; =] 元素本身：

body,
html {
  background: black;
}
.table {
  background: #97a98e;
  display: table;
}
.cell {
  display: table-cell;
  vertical-align: top;
}
h1,
p {
  color: #2a6e40;
  margin: 5px 10px;
}
h1 {
  border-bottom: 1px solid #2a6e40;
}
img {
  margin: 5px;
}

<div class="table">
  <div class="cell">
    <img src="http://placehold.it/100x100">
  </div>
  <div class="cell">
    <h1>Heading</h1>
    <p>Content</p>
  </div>
</div>

Answer 2

请试试这个

  <body>
    <table width="400" bgcolor="#97A98E">
      <tr>
        <td height="100" width="100" rowspan="2" bgcolor="blue">image</td>
        <td>Silver Shadow</td>
      </tr>
      <tr>
        <td>Pretty flower</td>
      </tr>
    </table>
  </body>

第二列成行

Second column into rows

html

css

css-tables