fi3ework's Studio.

CSS常用布局方式

2017/06/09 Share

高度相等的列

高度相等的列

思路:三列浮动布局,给每列一个很大的padding-bottom,然后每列的margin-bottompadding-bottom稍小,外面包裹的wrapper就会被最高的一列撑起来。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
width: 250px;
margin-left: 20px;
float: left;
padding: 10px;
background-color: orange;
padding-bottom: 520px;
margin-bottom: -500px;
}
.wrapper {
overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="wrapper">
<div class="box">
<h1>Andy Budd</h1>
<p>Andy is the Managing Director of Clearleft. He also goes by the title of User Experience Director depending what mood
he’s in. Andy is the author of CSS Mastery, curates the dConstruct and UX London events and is responsible for Silverbackapp,
our low cost usability testing application for the Mac.</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>Richard Rutter</h1>
<p>Richard is a founding partner and the production director for Clearleft. He has been designing websites and web applications
since the birth of the commercial web, over twelve years ago. Richard leads the user experience team at Clearleft, pioneering
innovative approaches to designing fantastic experiences for clients and their customers.</p>
<div class="bottom"></div>
</div>
<div class="box">
<h1>Jeremy Keith</h1>
<p>Jeremy is a hugely experienced developer specialising in XHTML, CSS, Javascript and PHP-driven solutions. Jeremy is technical
director at Clearleft.</p>
<div class="bottom"></div>
</div>
</div>

解决浮动元素溢出问题

  • 在外围div底部添加一个<br />然后设定br {clear: both};(需要添加额外的html)。

  • 将外围div设定为float(但是容器后面的的元素要设定clear

  • 将外围块设定为overflow: hidden;overhidden会强制外围块放大到包含浮动元素,如果是ie6及之前的浏览器,再添加zoom: 1;不过如果div中有绝对定位的元素时,可能显现不出来。

  • 使用简单清除法(需要添加额外的html)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 清理浮动 */
    .clearfix:after {
    content:"";
    display:block;
    height:0;
    font-size:0;
    clear:both;
    visibility:hidden;
    }
    .clearfix {
    zoom:1;
    }
    1
    <div class="clearfix"></div>

CATALOG
  1. 1. 高度相等的列
  2. 2. 解决浮动元素溢出问题
  3. 3.