Question

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

我想要结束的例子：

我正在考虑一个包含两列的div表，其中右列分为两行

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

我一直在努力寻找它，但由于距离大脑中的编码和苔藓太长，我无法让它融合在一起。

帮助！请！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

第二列成行

2 个答案: