CSS3中webkit-box布局页面实例

最新推荐文章于 2023-06-18 16:54:15 发布

大宝滋润霜

最新推荐文章于 2023-06-18 16:54:15 发布

阅读量1.1k

点赞数 1

分类专栏： css3 文章标签：布局 webkit css3 实例

本文链接：https://blog.csdn.net/meiminjun2012/article/details/44219791

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局；

接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例）

三列自适应布局

<!DOCTYPE html>

<html>

<meta charset=”utf-8″ />

<style>

.wrap {

display: -webkit-box;

-webkit-box-orient: horizontal;

}

.child {

min-height: 200px;

border: 2px solid #666;

-webkit-box-flex: 1;

margin: 10px;

font-size: 100px;

font-weight: bold;

font-family: Georgia;

-webkit-box-align: center;

}

</style>

<div class="wrap">

<div class="child">1</div>

<div class="child">2</div>

<div class="child">3</div>

</div>

</html>

如图：

三列布局，一列定宽，其余两列按1：2的比例自适应

<!DOCTYPE html>

<html>

<meta charset=”utf-8″ />

<style>

.wrap {

display: -webkit-box;

-webkit-box-orient: horizontal;

}

.child {

min-height: 200px;

border: 2px solid #666;

margin: 10px;

font-size: 40px;

font-weight: bold;

font-family: Georgia;

-webkit-box-align: center;

}

.w200 {width: 200px}

.flex1 {-webkit-box-flex: 1}

.flex2 {-webkit-box-flex: 2}

</style>

<div class="wrap">

<div class="w200 child">200px</div>

<div class="flex1 child">比例1</div>

<div class="flex2 child">比例2</div>

</div>

</html>

如图：

一个常见的web page 的基本布局

<!DOCTYPE html>

<html>

<meta charset=”utf-8″ />

<style>

header, footer,section {

border: 10px solid #333;

font-family: Georgia;

font-size: 40px;

text-align: center;

margin: 10px;

-webkit-box-flex:1;

}

#doc {

height: 100%;

display: -webkit-box;

-webkit-box-orient: vertical;

margin: 0 auto;

}

header,footer {

min-height: 100px;

-webkit-box-flex: 1;

}

#content {

min-height: 400px;

display: -webkit-box;

-webkit-box-orient: horizontal;

}

.w200 {width: 200px}

.flex1 {-webkit-box-flex: 1}

.flex2 {-webkit-box-flex: 2}

.flex3 {-webkit-box-flex: 3}

</style>

<div id="doc">

<header>Header</header>

<div id="content">

<section>定宽200</section>

<section>比例3</section>

<section>比例1</section>

</div>

<footer>Footer</footer>

</div>

</html>

如图：

大宝滋润霜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中webkit-box布局页面实例

之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局；接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例）三列自适应布局 .wrap { display: -we
复制链接

扫一扫