模仿html表格的css定位答案

【问题标题】：css positioning to mimic html table模仿html表格的css定位
【发布时间】：2015-04-29 20:50:33
【问题描述】：

我正在那里做一个项目，我想在 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>

【问题讨论】：

标签： html css css-position multiple-columns

【解决方案1】：

我肯定会为这种类型的数据使用表格。在这里，我将数据列 (td) 的宽度设置为 100%，并将标题列 (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>

【讨论】：

吉米你是神！非常感谢。正是我想要完成的。
好的，很好。如果非破坏性给您带来麻烦，您可以固定它们的宽度。例如：th { width: 20% } td { width: 80% } 这样就可以使标题始终占各自表格的 20%。
我还修改了答案以包含 vertical-align: top 以更匹配所需的格式
知道如何在将屏幕调整为小尺寸时使其不切断桌面吗？
我没有看到它被切断，但我的浏览器只缩小到大约 350 像素：i.imgur.com/d7sOUhE.png 你的看起来不一样吗？您可以做的一件事是为表指定min-width。这将导致表格在达到最小宽度后从水平布局切换到垂直布局。例如：table { min-width: 350px }

【解决方案2】：

使用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。

【讨论】：