display:table-cell 在页面中的应用
display:table属性可以让标签以表格的方式展现。与其对应的还有一个display:table-cell 属性,可以让标签元素以单元格展示，这与table表格中的td类似，用这个属性可以不用任何javascript脚本的情况下实现页面的等高布局，并且是响应式的，页面可以随着屏幕尺寸改变。目前IE8+以及其他现代浏览器都是支持此属性。
下面是自己写的一个demo，demo实现了一个页面的左中右三列等高布局
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<head>
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 180%;
color: #333;
}
#main {
display: table;
border-collapse: collapse;
}
#header {
background-color: #e7dbcd;
padding: 10px;
text-align: center;
border-bottom: 1px dotted #d7ad7b;
}
#nav {
padding: 10px;
display: table-cell;
width: 20%;
background-color: #e7dbcd;
}
#extras {
display: table-cell;
width: 50%;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}
#content {
display: table-cell;
width: 30%;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>header</h1>
</div>
<div id="main">
<div id="nav"> It's not every day an old record is broken and a new one set. But in China's film business, a year is a pretty conservative figure.
On Sunday, April 12, Fast & Furious 7 crashed through several milestones in the burgeoning film market in the Middle Kingdom.
The Sunday opening raked in 54 million yuan （$8.69 milion） for its midnight screenings, with some theaters scheduling more than one screening for eagerly lined-up fans. The previous record was set by Transformers: Age of Extinction, which grossed 21 million yuan ($3.38 million) for its midnight screenings.
For the whole day's earnings, the Vin Diesel and Paul Walker feature touched the psychological water mark of 400 million yuan ($68.6 million), the highest-grossing single-day result ever for the Chinese mainland. Again, the previous record was by the fourth installment of Transformers, at 223 million yuan ($35.93 million).
More importantly, it trumped the highest-grossing single day for total box office, which, at 373 million yuan ($60.09 million), was set on Lunar New Year's Day only two months earlier.
Of course, the seventh installment of the Fast & Furious franchise was not the only movie in town. It occupied 58.75 percent of all screens, but accounted for nearly 90 percent of all box-office revenues for Sunday.
To compare with its own past, Fast & Furious 6, released in 2013, had total box office receipts of 400 million yuan ($64.44 million) in China, equal to the first-day gross of the new movie. Fast & Furious 5 (2011) reached 250 million yuan ($40.28 million) and the fourth installment, which was the first to be screened in China, registered a meager 50 million in 2009. </div>
<div id="extras"> extras</div>
<div id="content"> It's not every day an old record is broken and a new one set. But in China's film business, a year is a pretty conservative figure.
On Sunday, April 12, Fast & Furious 7 crashed through several milestones in the burgeoning film market in the Middle Kingdom.
The Sunday opening raked in 54 million yuan （$8.69 milion） for its midnight screenings, with some theaters scheduling more than one screening for eagerly lined-up fans. The previous record was set by Transformers: Age of Extinction, which grossed 21 million yuan ($3.38 million) for its midnight screenings.
For the whole day's earnings, the Vin Diesel and Paul Walker feature touched the psychological water mark of 400 million yuan ($68.6 million), the highest-grossing single-day result ever for the Chinese mainland. Again, the previous record was by the fourth installment of Transformers, at 223 million yuan ($35.93 million).
More importantly, it trumped the highest-grossing single day for total box office, which, at 373 million yuan ($60.09 million), was set on Lunar New Year's Day only two months earlier.
Of course, the seventh installment of the Fast & Furious franchise was not the only movie in town. It occupied 58.75 percent of all screens, but accounted for nearly 90 percent of all box-office revenues for Sunday.
To compare with its own past, Fast & Furious 6, released in 2013, had total box office receipts of 400 million yuan ($64.44 million) in China, equal to the first-day gross of the new movie. Fast & Furious 5 (2011) reached 250 million yuan ($40.28 million) and the fourth installment, which was the first to be screened in China, registered a meager 50 million in 2009. </div>
</div>
</div>
</body>
</html>
demo配图
浙公网安备 33010602011771号