html 多列等高实现方法

内容摘要
这篇文章主要为大家详细介绍了html 多列等高实现方法，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。css代码如下：

/**
* 多列等高
*
文章正文

这篇文章主要为大家详细介绍了html 多列等高实现方法，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记。css代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<code class="css">
/**
 * 多列等高
 *
 * @param
 * @arrange （www.idcnote.com）
 **/
#header
{
background-color: gray;
height: 100px;
width: 960px;
}
#container-1, #container-2, #container-3
{
position: relative;
float: left;
}
#container-1
{  
overflow: hidden;
width: 960px;
margin-top: 10px;
background-color: red; 
}
#container-2
{
background-color: green;
left: 240px;
}
#container-3
{
float: left;
background-color: blue;
left: 480px;
}
#main, #primary, #secondary
{
display: inline;
margin: 0 10px;
position: relative;
float: left;
}
#main
{
width: 460px;
right: 50%;
}
#primary
{      
width: 220px;
right: 125%;
}
#secondary
{
right: 75%;
width: 220px;  
}</code>
html代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
<code class="html">
<div id="header"></div>    
<div id="container-1">
<div id="container-2">
<div id="container-3">
<div id="main">Main<br />Main</div>
<div id="primary">Primary</div>
<div id="secondary">Secondary</div>
</div>
</div>
</div>   
<div style="clear: left">
</div></code>

注：关于html 多列等高实现方法的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇python大小写转换,首字母大写,去除特殊字符的解决办法下一篇JavaScript大量子节点DOM操作功能实例

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！