返回

CSS中的两栏等高布局

两栏等高布局

1. 抵消外边距和内边距

HTML部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="content">
     <div id="left" class="row">
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
          <p>left</p>
     </div>
     <div id="right" class="row">right</div>
</div>

CSS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#content{
    /* 设置overflow属性触发bfc，包含内部浮动 */
    overflow: hidden;   
}
#left{
    width: 200px;
    background: red;
    float: left;
}
#right{
     background: blue;
     overflow: hidden; /* 触发了bfc，这样就不和左侧浮动元素重叠 */
}
.row{
    /* 内外边距抵消 */
     padding-bottom: 4000px;
     margin-bottom: -4000px;
}

2. 内边距，边框[左边定宽，右边自适应]

HTML部分:

1
2
3
4
<div id="container">
    <div id="content">content<br/><br/></div>
    <div id="sidebar">sidebar<br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>

CSS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#container{
    background-color: #0ff;
    overflow: hidden;
    padding-left: 200px;
}
* html #container{
    height: 1%; /* So IE plays nice */
}
#sidebar{
    background-color: #f00;
    width: 200px;
    float: right;
    margin-left: -200px;               
}    
#content{
    background-color: #0ff;
    width: 100%;
    float: right;
    border-left: 200px solid #f00; 
    margin-left: -200px;         
}

3. 内边距，边框[右边定宽，左边自适应]

HTML部分:

1
2
3
4
<div id="container">
    <div id="content">content<br/><br/></div>
    <div id="sidebar">sidebar<br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>

CSS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#container{
    background-color: #0ff;
    overflow: hidden;
    padding-right: 200px;
}
* html #container{
    height: 1%; /* So IE plays nice */
}
#sidebar{
    background-color: #f00;
    width: 200px;
    float: left;
    margin-right: -200px;               
}    
#content{
    background-color: #0ff;
    width: 100%;
    float: left;
    border-right: 200px solid #f00; 
    margin-right: -200px;         
}