个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
编辑:添加了一个演示图像，其中包含我如何需要网站布局设计的示例
我需要一个简单的 3 列布局表，就像演示中的下图一样，但它不起作用。我上传了一张我需要的图片和一个演示结果。这是带有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>title</title>
</head>
<body>
<div style="display:table;width:100%;height:100%:min-width:1000px;">
<div style="display:table-row">
<div style="display:table-cell;width:100%;min-width:1000px;height:23px;min-height:23px;"> only 1 TD 100% width only 23 height </div>
</div>
<div style="display:table-row">
<div style="display:table-cell;width:200px;min-width:200px;height:77px;min-height:77px;"> left 200 px width </div>
<div style="display:table-cell;width:100%;min-width:800px;height:77px;min-height:77px;"> middle 100% of screen width </div>
<div style="display:table-cell;width:200px;min-width:200px;height:77px;min-height:77px;"> right 200 px width</div>
</div>
<div style="display:table-row">
<div style="display:table-cell;width:200px;min-width:200px;height:100%;min-height:100%;"> left 200 px width but height 100% </div>
<div style="display:table-cell;width:100%;min-width:800px;height:100%;min-height:100%;"> middle 100% of screen width but height 100% </div>
<div style="display:table-cell;width:200px;min-width:200px;height:100%;min-height:100%;"> right 200 px width but height 100% </div>
</div>
<div style="display:table-row">
<div style="display:table-cell;width:100%;min-width:1000px;height:12px;min-height:12px;"> only 1 TD 100% width only 12px height </div>
</div>
</div>
</body>
</html>
这是一张我需要它看起来像的图片 
这里有一个 fiddle 演示 https://jsfiddle.net/yzr3v04u/
如果 CSS 表格是 future 并且可以编辑并放置在我想要的任何地方，为什么不能按我想要的方式工作？
图像演示中我需要的任何其他方法有什么想法吗？
最佳答案
给你。请不要使用表格来构建网站布局，在响应式(移动设备)设计方面这是不好的做法，请改用 CSS。
如果您希望您的列高低于页面底部，可以使用名为 Viewport-Percentage (or Viewport-Relative) Lengths 的新 CSS3 测量单位。
您需要做的就是将 height: 100vh; 添加到您的 CSS .content-wrapper。
.header {
width: 100%;
height: 21px;
background-color: orange;
}
.sub-header {
width: 100%;
height: 79px;
background-color: brown;
}
.content-wrapper {
width: 100%;
height: 100vh;
}
.left-column {
display: inline;
float: left;
width: 200px;
height: 100%;
background-color: purple;
}
.middle-column {
display: inline;
float: none;
height: 100%;
background-color: white;
}
.right-column {
display: inline;
float: right;
width: 200px;
height: 100%;
background-color: purple;
}
.footer {
width: 100%;
height: 12px;
background-color: pink;
}<div class="header"></div>
<div class="sub-header"></div>
<div class="content-wrapper">
<div class="left-column">1</div>
<div class="middle-column">2</div>
<div class="right-column">3</div>
</div>
<div class="footer"></div>关于html - div显示表格行单元格布局结构简单但不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30057135/
25
4
0
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件 最佳答案 您可以在文件读取循环中设置一个计数器并打印它， 计数=0 读取行时做 让我们数一数++ if
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在，我想写入文件 2 中的行，否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
如何从用户中选择user_id，SUB(row, row - 1)，其中user_id=@userid我的表用户，id 为 1、3、4、10、11、23...(不是++) --id---------u
我曾尝试四处寻找解决此问题的最佳方法，但我找不到此类问题的任何先前示例。 我正在构建一个基于超本地化的互联网购物中心，该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
我正在尝试创建一个正则表达式，使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行 我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白，但效果不佳。 最
下面的代码从数据库中获取我需要的信息，但没有打印出所有信息。首先，我知道它从表中获取了所有正确的信息，因为我已经在 sql Developer 中尝试过查询。 public static void m
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我试图在两个表中插入记录，但出现异常。您能帮我解决这个问题吗？ 首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
如果我想从表中检索前 10 行，我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。 如果我在下面执行这段代码，
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
我正在尝试在我的网站上开发一个用户个人资料系统，其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录，但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢？ query($q)
我在互联网上寻找答案，但找不到任何答案。 (我可能问错了？)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
我有以下查询，我想从数据库中获取 100 个项目，但 host_id 多次出现在 urls 表中，我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
我的数据库表中有超过 500 行具有特定日期。 查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。 如何逐行查询
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等，直到文本文件结束。例如在第 4 行声明，打印 5-9，跳过 10-14，打印 15-19 等 来自文件 1 2 3 4 5 6
我目前正在执行验证过程来检查用户的旧密码，但问题是我无法理解为什么我的查询返回零行，而预期它有 1 行。另一件事是，即使我不将密码文本转换为 md5，哈希密码仍然得到正确的答案，但我不知道为什么会发生
我是一名优秀的程序员,十分优秀！