CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局-css教程-PHP中文网

首页

web前端

css教程

CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局

青灯夜游

Dec 14, 2020 pm 06:01 PM

css页面布局

本文就来为大家介绍3种常见的CSS页面布局：双飞翼布局、粘连布局、左右两列布局，希望对大家有一定的帮助。

CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局

（推荐教程：CSS视频教程）

一、左右两列布局

1、代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<!--左边列固定，右边列自适应-->
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
min-width: 600px;
}
.lef{
width: 100px;
height: 400px;
background: hotpink;
float: left;
}
.rig{
height: 400px;
background: yellowgreen;
margin-left: 50px;
/*给right开启BFC
利用BFC的特性：
bfc的区域不会与浮动的box重叠*/

/* 溢出内容部分被切割,所以使用省略号表示 */
overflow: hidden;
/*出现省略号需要四个设置：
* display: block;
* overflow: hidden;
* white-space: nowrap;
* text-overflow: ellipsis
* */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
}
.con{
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="con">
<div class="lef">left</div>
<div class="rig">
lzprightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
rightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
rightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
rightrightrightrightrightrightrightrightrightrightrightrightrightright <br />
</div>
</div>
</body>
</html>

效果如下：

2、必要说明

外层容器con如果为固定宽度，right元素的overflow: hidden;是必须的，否则会出现rig中的字体不在rig里面。

外层容器con宽度如果是100%，或者默认，此时right元素的overflow: hidden;可有可无，页面不会因此受到影响。

二、粘连布局

1、代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"/>
<title>粘连布局</title>
<!--
当页面中无内容或内容不足一屏时，footer在页面最底部显示
当页面内容很多一屏装不下时，footer紧随内容其后显示
-->
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.wrap{
/* 设置wrap的最小高度,当main元素中的内容较少或者为空时，也能保持100%高度 */
min-height: 100%;
background: yellowgreen;
text-align: center;
}
.main{
/*main的height值由内容决定*/
/*当内容不足一屏时，下面的设置不会撑开父元素wrap，此时wrap的min-height设置生效，
* 当内容刚好一屏时，下面的设置开始撑开父容器，其height值为100%+50px。
* 拉开这50px的原因是防止footer遮盖住main内容，这个值不是固定死的，由footer的高度值决定
* 为footer向上填充margin-top: -50px;做准备
* */
padding-bottom: 50px;
}
.footer{
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
main<br />main<br />main<br />main<br />
mlzpain<br />
</div>
</div>
<!--footer元素放在wrap外-->
<div class="footer">
footer
</div>
</body>
</html>

三、双飞翼布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼三列布局</title>
<style type="text/css">
/*清除浏览器默认样式*/
*{
padding: 0;
margin: 0;
}
/*设置body的最小宽度*/
body{
min-width: 600px;
}
/*左浮动*/
.fl{
float: left;
}
/*双飞翼三列布局*/
.mid{
width: 100%;
}
.lef{
width: 200px;
background: mediumpurple;
margin-left: -100%;
}
.rig{
width: 200px;
background: orangered;
margin-left: -200px;
}
.inn_mid{
margin: 0 200px;
background: pink;
}
/*等高布局*/
/* 先使子元素溢出父盒子范围，然后在父盒子中设置overflow:hidden;
清除溢出部分，从而由原来的不等高达到等高效果 */
.mid, .lef, .rig{
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.con{
border: 5px solid deepskyblue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="con">
<div class="mid fl">
<div class="inn_mid">
<h4>middle</h4>
<h4>middle</h4>
<h4>middle</h4>
</div>
</div>
<div class="lef fl">left</div>
<div class="rig fl">right</div>
</div>
</body>
</html>

效果如下：

更多编程相关知识，请访问：编程教学！！

以上是CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：博客园。如有侵权，请联系admin@php.cn删除

' CSS4”更新Apr 11, 2025 pm 12:05 PM

自从我第一次介绍了CSS4面中的事情以来，就已经进行了更多的讨论。我将在这里从其他人那里汇集我最喜欢的想法。有

三种代码Apr 11, 2025 pm 12:02 PM

每次启动一个新项目时，我都会将我正在查看的代码分为三种类型，或者如果您愿意的话。我认为这些类型可以应用于

https很容易！Apr 11, 2025 am 11:51 AM

我对公开哀悼HTTPS的复杂性感到内gui。过去，我从第三方供应商那里购买了SSL证书，并且遇到了麻烦

HTML数据属性指南Apr 11, 2025 am 11:50 AM

您想了解的有关HTML，CSS和JavaScript中数据属性的所有信息。

了解JavaScript中的不变性Apr 11, 2025 am 11:47 AM

如果您以前从未在JavaScript中使用不变性，则可能会发现很容易将其与为新值或重新分配分配变量的混淆。

具有现代CSS功能的定制样式表单输入Apr 11, 2025 am 11:45 AM

如今，可以在语义上且易于访问的同时构建自定义的复选框，无线电按钮和切换开关。我们甚至不需要

脚注字符Apr 11, 2025 am 11:34 AM

有特殊的超级数字字符有时非常适合脚注。他们在这里：

如何使用HTML，CSS和JavaScript创建动画倒计时计时器Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然访问插件，但实际上更多

See all articles

热AI工具

热工具

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中