个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
26
4
鉴于以下 HTML 和 CSS，我在浏览器中完全看不到任何内容(撰写本文时最新的 Chrome 和 IE)。一切都折叠到 0x0 像素。为什么？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
section { display: table; height: 100%; background-color: grey; }
#colLeft { display: table-column; height: 100%; background-color: green; }
#colRight { display: table-column; height: 100%; background-color: red; }
#row1 { display: table-row; height: 100%; }
#row2 { display: table-row; height: 100%; }
#row3 { display: table-row; height: 100%; }
#cell1 { display: table-cell; height: 100%; }
#cell2 { display: table-cell; height: 100%; }
#cell3 { display: table-cell; height: 100%; }
</style>
</head>
<body>
<section>
<div id="colLeft">
<div id="row1">
<div id="cell1">
AAA
</div>
</div>
<div id="row2">
<div id="cell2">
BBB
</div>
</div>
</div>
<div id="colRight">
<div id="row3">
<div id="cell3">
CCC
</div>
</div>
</div>
</section>
</body>
</html>
最佳答案
CSS表格模型基于HTML表格模型 http://www.w3.org/TR/CSS21/tables.html
一个表格被分成ROWS，每一行包含一个或多个单元格。单元格是 ROWS 的子项，它们永远不是列的子项。
“display: table-column”不提供制作分栏布局的机制(例如，报纸页面有多栏，内容可以从一栏流到下一栏)。
相反，“table-column”仅设置适用于表格行内相应单元格的属性。例如。可以用“每行第一个单元格的背景色为绿色”来形容。
表格本身的结构始终与 HTML 中的相同。
在 HTML 中(注意“td”在“tr”内，而不是在“col”内):
<table ..>
<col .. />
<col .. />
<tr ..>
<td ..></td>
<td ..></td>
</tr>
<tr ..>
<td ..></td>
<td ..></td>
</tr>
</table>
使用 CSS 表格属性的相应 HTML(请注意，“列”div 不包含任何内容——标准不允许直接在列中包含内容):
.mytable {
display: table;
}
.myrow {
display: table-row;
}
.mycell {
display: table-cell;
}
.column1 {
display: table-column;
background-color: green;
}
.column2 {
display: table-column;
}<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow">
<div class="mycell">contents of first cell in row 1</div>
<div class="mycell">contents of second cell in row 1</div>
</div>
<div class="myrow">
<div class="mycell">contents of first cell in row 2</div>
<div class="mycell">contents of second cell in row 2</div>
</div>
</div>可选:“行”和“列”都可以通过为每一行和单元格分配多个类来设置样式，如下所示。这种方法在指定要设置样式的各种单元格集或单个单元格方面提供了最大的灵 active :
//Useful css declarations, depending on what you want to affect, include:
/* all cells (that have "class=mycell") */
.mycell {
}
/* class row1, wherever it is used */
.row1 {
}
/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}
/* cell1 of row1 */
.row1 .cell1 {
}
/* cell1 of all rows */
.cell1 {
}
/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}
/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}
/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}
/* cell1 of all rows of a mytable */
.mytable .cell1 {
}<div class="mytable">
<div class="column1"></div>
<div class="column2"></div>
<div class="myrow row1">
<div class="mycell cell1">contents of first cell in row 1</div>
<div class="mycell cell2">contents of second cell in row 1</div>
</div>
<div class="myrow row2">
<div class="mycell cell1">contents of first cell in row 2</div>
<div class="mycell cell2">contents of second cell in row 2</div>
</div>
</div>在今天的灵活设计中，使用<div>出于多种目的，明智的做法是在每个 div 上放置 一些 类，以帮助引用它。在这里，曾经是 <tr>在 HTML 中变成了 class myrow , 和 <td>变成了class mycell .这种约定使上述 CSS 选择器变得有用。
性能说明:将类名放在每个单元格上并使用上述多类选择器比使用以 * 结尾的选择器性能更好，例如 .row1 *甚至 .row1 > * .原因是选择器是last first匹配的，所以在寻找匹配元素时，.row1 *首先做* ，匹配所有元素，然后检查每个元素的所有祖先，以查找是否有任何祖先具有class row1 .这在慢速设备上的复杂文档中可能会很慢。 .row1 > *更好，因为只检查直接父级。但是通过 .row1 .cell1 立即消除大多数元素要好得多。 . ( .row1 > .cell1 是一个更严格的规范，但它是搜索的第一步，它产生了最大的不同，所以通常不值得困惑，以及关于它是否永远是直接 child 的额外思考过程, 添加子选择器 > 。)
消除性能的关键点是选择器中的last项应该尽可能具体，并且永远不应该是* .
关于css - CSS "display: table-column"应该如何工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7617418/
26
4
0
除了 Display.getOrientation() 已弃用之外，Display.getRotation() 和 Display.getOrientation() 之间还有什么区别？ 是否都返回等于
我的问题 这些方法中有哪一种是专业网页设计师所偏爱的吗？ Web 浏览器在绘制网站时是否首选这些方法中的任何一种？ 这只是个人喜好吗？ 我还缺少其他技巧吗？ 注意:以上问题是关于设计多列布局 floa
我的问题 专业网页设计师是否喜欢这些方法？ 网页浏览器在绘制网站时是否首选这些方法？ 这只是个人喜好吗？ 我还缺少其他技术吗？ 注意:以上问题与设计多列布局有关 float :左； http://js
我有一些代码返回 MyTrait 类型的特征对象，这样它就可以返回几个不同结构之一。我想为 trait 对象实现 Display trait，这样我就可以打印对象，并将详细信息委托(delegate)
package polymorphism; /* * @author Rahul Tripathi */ public class OverLoadingTest { /** *
我希望 Display.timerExec(int,Runnable)与 Display.asyncExec(Runnable) 大致相同但有指定的延迟。然而，似乎Display.timerExec只
就像标题所暗示的，有什么区别吗？我当时使用的是pygame.display.flip，我在互联网上看到的是，他们使用pygame.display.update而不是使用flip。哪一个更快？ 最佳答案
Sample.this.display() 和 this.display() 哪个更好？ class Sample{ void display(){ System.out.println("d
当图像的 CSS 属性“显示”已被任何其他 JS 脚本/函数更改时，我想运行一些 JS 代码。有什么方法可以监视该更改并设置回调函数吗？ $(this).bind.('propertychange',
在浏览 Google 字体时我注意到第一个过滤器包含这些类别: Serif Sans 衬线 展示 手写 我知道什么是 (Sans)Serif 和 Handwriting 类别(这很明显)但是显示类别过
我想知道是否可以在列标记内渲染自定义 html，这是显示表标记的一部分。 例如，我希望我的专栏里面有一些下拉列表？ 使用纯 html，如下所示: ... Volvo Saab Me
display.newImage() 和 display.newImageRect() 有什么区别？ 哪个更好用？ 最佳答案 display.newImage() 的文档具体提到: NOTE: dis
我正在使用纯 JS 和 flexbox 为我的元素创建网格。 元素的某些部分在页面加载时被显示隐藏:无，但单击按钮后它应该在不显示和阻止之间切换。 可悲的是，这完全破坏了 display: flex
我目前正在参加 HTML/CSS 类(class)，这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="de
这个问题在这里已经有了答案: Css transition from display none to display block, navigation with subnav [duplicat
我理解 style="display: none" 隐藏一个 HTML 元素，而 style="display: block" 显示一个 block 级 HTML 元素。 我看到一些使用 style=
设置控件的样式 display: none 和 display: block 有什么区别？ 最佳答案 display 属性定义了某个 HTML 元素应该如何显示。 Display block 和 no
这个问题已经有答案了: Javascript AND operator within assignment (7 个回答) 已关闭 4 年前。 假设我只想在 this.state.display 为
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。 我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。 我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
我是一名优秀的程序员,十分优秀！