无法将 html 布局从表格转换为 div 和 css答案

【问题标题】：Trouble converting html layout from table to divs & css无法将 html 布局从表格转换为 div 和 css
【发布时间】：2015-09-30 15:05:41
【问题描述】：

我正在尝试更新一个旧的 Web 应用程序。在最初的设计中，HTML 表格被广泛用于布局非表格和表格数据。现在我试图通过删除大部分 HTML 表格布局并用 div 和 CSS 替换它来“现代化”应用程序。下面是表格中少量信息的示例，我已转换为 div 和 CSS。我的问题是 CSS 不是很通用，因此将其扩展到整个应用程序的级别似乎不切实际。不幸的是，我想不出更好的方法来解决这个问题。我正在寻找使用 div 和 CSS 执行此类布局的更好方法的一些想法。

这只是我转换的一个小页面。我有这个应用程序的其他屏幕，它们具有类似的布局和大量的数据，我想要一个很好的布局方法的建议。我不是在找人来重写我的代码。我只需要一个新的想法，不需要为旧表格布局的每个单元格添加四行 CSS。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
#headerData {
    position: absolute;
    background-color: #CCC;
    left: 10;
    width:800px;
    top: 10;
    height: 130px;
    clear: both;
    border: medium solid #999;
}
#headerData h2 {
    top: -15px;
    position: absolute;
    left: 10px;
}
.dataLabels{
    text-align: right;
}
.dataFields {
    text-align: left;
    color: #00F;
    padding-left: 2px;
    background-color: #fff;
    border: thin solid #999;
}
.rowOne {
    position: absolute;
    top: 43px;
    height: 19px;
}
.rowTwo {
    position: absolute;
    top: 70px;
    height: 19px;
}
.rowThree {
    position: absolute;
    top: 96px;
    height: 19px;
}
.colOne {
    left: 15px;
    width: 151px;
}
.colTwo {
    left: 171px;
    width: 80px;
}
.colTwoSpanThree {
    left: 171px;
    width: 265px;
}
.colThree {
    left: 260px;
    width: 92px;
}
.colThreeSpanTwo {
    left: 260px;
    width: 243px;
}
.colFour {
    left: 360px;
    width: 143px;
}
.colFourFive {
    left: 440px;
    width: 65px;
}
.colFive {
    left: 517px;
    width: 64px;
}
.colFiveSix {
    left: 512px;
    width: 272px;
}
.colSix {
    left: 589px;
    width: 122px;
}
.colSeven {
    left: 720px;
    width: 69px;
    text-align: center;
    background-color: #9C0;
}
</style>
</head>

<body>
<div id="headerData">
  <h2>WORK ORDER</h2>
  <div class="rowOne colOne dataLabels">Order:</div>
  <div class="rowOne colTwo dataFields">3105-001</div>
  <div class="rowOne colThree dataLabels">Parent:</div>
  <div class="rowOne colFour dataFields">3105</div>
  <div class="rowOne colFive dataLabels">Project:</div>
  <div class="rowOne colSix dataFields">2013 DiskProj</div>
  <div class="rowOne colSeven">Open</div>
  <div class="rowTwo colOne dataLabels">Customer:</div>
  <div class="rowTwo colTwo dataFields">MICR01</div>
  <div class="rowTwo colThreeSpanTwo dataFields">Microsoft Corporation</div>
  <div class="rowTwo colFive dataLabels">Estimate:</div>
  <div class="rowTwo colSix dataFields">5248 Rev A</font></div>
  <div class="rowThree colOne dataLabels">Item:&nbsp;<span style="font-family: Wingdings; background-color: #fff;">&#254;</span></div>
  <div class="rowThree colTwoSpanThree dataFields">2016 Office DVD</div>
  <div class="rowThree colFourFive dataLabels">Desc:</div>
  <div class="rowThree colFiveSix dataFields">2016 Ofc Distribution Disk</div>
</div>
</body>
</html>

【问题讨论】：

坚持使用表格。通过重新实现布局，您将获得什么？使用指定的像素坐标绝对定位您的页面充其量只是一种侧级。

标签： html css

【解决方案1】：

一个建议是将Bootstrap 添加到您的项目中。 Bootstrap 具有支持“row”和“col”的内置类，您可以通过它们轻松地模拟表结构。

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-4"></div>
    <div class="col-md-8"></div>
</div>

将高度和宽度定义为百分比而不是实际像素以支持窗口大小调整是个好主意。（尽管可能存在需要严格像素定义的明确情况）。

【讨论】：