相关疑难解决方法(0)

了解Bootstrap的clearfix类

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

Run Code Online (Sandbox Code Playgroud)

为什么不用display:block？
另外,为什么它也适用于::before伪类？

less clearfix twitter-bootstrap

Lan*_*ton

2015 10-31

61
推荐指数

2
解决办法

14万
查看次数

包含浮动div的包装器问题

我想创建一个,浏览器为中心,接壤,包装,在各地的各种div的高度autoexpands.当使用浮动来保持div在线时,包装器在第一个div之后停止.善待,这可能是也可能不是正确的方法,但这就是我在这里的原因.

这是一个简单的例子.

<head>

<style type="text/css">
<!--
#wrapper {
height: 100%;
width: 800px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
height: 100px;
width: 800px;
}
#column1 {
width: 300px;
height: 400px;
float: left;
}
#column2 {
height: 400px;
width: 300px;
float: left;
}
#navbox {
float: left;
width: 200px;
height: 400px;
}
-->
</style>

</head>

<body>

<div id="wrapper">

<div id="header">test header</div>
<div id="navbox">test navbox</div>
<div id="column1">test column1</div>
<div id="column2">test column2</div>

</div><!--Close_wrapper-->
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

html css wrapper

Sco*_* C.

2010 01-16

5
推荐指数

2
解决办法

1万
查看次数