Question

我有一个旧的网络应用程序，我正在尝试更新。在原始设计中，HTML表格被广泛用于布局非表格和表格数据。现在我正在尝试现代化＆＃34;应用程序通过删除大多数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>

Answer 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>

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

无法将html布局从表格转换为divs＆amp; CSS

1 个答案: