我有一个旧的 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: <span style="font-family: Wingdings; background-color: #fff;">þ</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>
最佳答案
一个建议是添加 Bootstrap到你的元素。 Bootstrap 具有支持“行”和“列”的内置类，通过它们您可以轻松地模拟表结构。
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
将高度和宽度定义为百分比而不是实际像素以支持窗口大小调整是个好主意。 (尽管可能存在需要严格像素定义的明确情况)。
关于html - 无法将 html 布局从表格转换为 div 和 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32855845/