等寬類表格佈局

森林蘑菇_mushroom發表於2017-12-14

flex佈局，IE10及IE10以上支援，IE10需要加上-ms-

  • 這支援率，很刺激，網站慎用。

display: table-*佈局

  • 比table的自動佈局渲染效率高多了，而且支援IE8及IE8以上。
<!DOCTYPE html>
<html>
<head>
	<title>dd</title>
	<style type="text/css">
		ul,li{
			margin:0;
			padding:0;
		}
		.container {
  			display: flex;
  			width: 200px;
  			height: 50px;
		}
		.item {
			border:1px solid #000;
		 	flex: 1;
		}
		.table1{
			width: 200px;
			display: table;
  			table-layout: fixed;
		}
		.table1 li{
			border:1px solid #000;
			display: table-cell;
		}
		.table2{
			width: 200px;
		}
		.table2 li{
			border:1px solid #000;
			display: table-cell;
			width: 1%;
		}
		
	</style>
</head>

<body>
<h4>flex</h4>
<div class="container">
	<div class="item">item1</div>
	<div class="item">item2</div>
	<div class="item">item3</div>
</div>

<h4>table1</h4>
<ul class="table1">
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
	<li>li4</li>
</ul>

<h4>table2</h4>
<ul class="table2">
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
	<li>li4</li>
</ul>

</body>
</html>
複製程式碼

谷歌瀏覽器下效果

等寬類表格佈局

IE8瀏覽器下效果

等寬類表格佈局

相關文章