css 定位模仿 html table

Question

我正在做一个项目，我想在 2 列中显示数据。每列将包含一个我试图放置在列左侧的标题和一些将位于标题旁边（列右侧）的数据。

我遇到的问题是，当更改屏幕尺寸或有大量数据时，我似乎无法将标题和数据保持在同一位置。数据不断下降到标题下方，这不是我要找的。

我尝试了以下 css/html。我很确定我很接近。我也尝试过使用 html 表，但根本不会调整大小。想知道是否有人知道如何调整我的代码以使我的布局如下图所示：

我的代码：

.left, .right{
width: 49%;
float: left;
}
.block{
width: 100%;
float: left;
position:relative;
}
.leftHead, .rightHead{
width: 20%;
float: left;
}
.leftData, .rightData{
width: 79%;
float: left;
font-weight: bold;
}
<div class='left'>
    <div class='block'>
          <div class='leftHead'>
                left head
          </div>
          <div class='leftData'>
                left data
          </div>
    </div>
</div>
<div class='right'>
    <div class='block'>
          <div class='rightHead'>
                right head 1
          </div>
          <div class='rightData'>
                right data 1
          </div>
    </div>
    <div class='block'>
          <div class='rightHead'>
                right head 2
          </div>
          <div class='rightData'>
                right data 2
          </div>
    </div>
</div>

Answer 1

对于这种类型的数据，我肯定会使用表格。在这里，我将数据列的 (td) 宽度设置为 100%，并且 header 列 (th) 不换行。也许这可以满足您的需求？

table.two-column {
  width: 50%;
  float: left;
  border-collapse: collapse;
}

.two-column th {
  white-space: nowrap;
}

.two-column td {
  width: 100%;
}

.two-column th,
.two-column td {
  vertical-align: top;
  padding: .25em;
}
  
table.orange th,
table.orange td {
  border: 2px solid orange;
}


table.green th,
table.green td {
  border: 2px solid green;
}

<table class="two-column orange">
  <tr>
    <th>Heading 1</th>
    <td>Lots of data here that should cause the cell to break to a new line but the heading should remain aligned vertically to the top.</td>
  </tr>
  <tr>
    <th>Heading 2</th>
    <td>Data 2</td>
  </tr>
</table>


<table class="two-column green">
  <tr>
    <th>Heading 3</th>
    <td>Data 3</td>
  </tr>
  <tr>
    <th>Heading 4</th>
    <td>Lots of data here that should cause the cell to break to a new line but the heading should remain aligned vertically to the top.</td>
  </tr>
</table>

Answer 2

对 'tabled' 个元素使用 display: table-cell 而不是 floats。

.left, .right{
    width: 49%;
    float: left;
}
.block{
    width: 100%;
    position:relative;
}
.leftHead, .rightHead{
    width: 20%;
    display: table-cell;
}
.leftData, .rightData{
    width: 79%;
    font-weight: bold;
    display: table-cell;
}

这里是Fiddle if you want to see it in action.

css 定位模仿 html table

css positioning to mimic html table

html

css

css-position

multiple-columns