热门关键字:
jquery > jquery教程 > div+css > 解决列等高的方法1(CSS样式代码控制)

解决列等高的方法1(CSS样式代码控制)

2134
作者:管理员
发布时间:2013/5/28 0:59:39
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=279
在该方法中我们使用一个列表或一个div包围的一组<DIV> S(每一列)。封闭的div给出显示:表的属性,每个封闭的div给出显示:表格单元格属性。

我将用一个例子讨论这个:

样式代码如下:

<style>
.base {
	/*make it 100% width and a minimum of 1000px width*/
 	width:auto;
	margin:0 auto;
	min-width:1000px;
	padding:0px;
	display:table;
}
.base-row {
	Display:table-row;
}
.base li {
	display:table-cell;
	width:33%;
	text-align:center;
}
.cell1 {
	background-color:#9933FF;
}
.cell2 {
	background-color:#339933;
}
.cell3 {
	background-color:#CC99FF;
}
</style>

HTML代码如下:

<div class="base">
  <ul class="base-row">
    <li class="cell1">
      <div class="content1" >.....Lots of  Content....</div>
    </li>
    <li class="cell2">
      <div class="content2">.....Lots of  content....<br /><br />heihei</div>
    </li>
    <li class="cell3">
      <div class="content3">.....Lots of  content....</div>
    </li>
  </ul>
</div>

优势:
这是非常简单和容易实现的。它比其他方法更简单。这可以为您节省很多头痛和时间。
一个边缘(在表布局单元格间距等)不能被应用到每一个细胞。这可以通过使用白颜色边框克服(或背景色)一个合适的宽度来模拟一个单元格间距。





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:解决列等高 CSS样式代码
友荐云推荐