如何实现css布局三行二列布局代码．

Posted 2023-05-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现css布局三行二列布局代码．相关的知识，希望对你有一定的参考价值。

问这个问题的时候按快了没打完字就按了ENTER．．．．

是这个样子的

上面一排长的长960吧
中间一行高 800吧
中间那行分成两列，左边的大部分500吧为一大块，右边的那一列再分成上下两个块，上面跟下面各400，
最下面是两个DIV，一个底部，一个留其他，帮忙弄下CSS．．谢谢，万分感谢！

参考技术A 经典三行两列居中高度自适应

<html>
<head>
<style type="text/css">
body
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;

#header
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
#contain
margin-right: auto;
margin-left: auto;
width: 776px;
#mainbg
width:776px;
padding: 0px;
background: #60A179;
float: left;

#right
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;

#left
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;

#footer
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
.textmargin:0px;padding:20px;
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html> 参考技术B div的嵌套本回答被提问者采纳

CSS 网页布局基础

基础布局

1 一行布局

基础的行布局
行布局自适应
行布局自适应限制最大宽
行布局垂直水平居中

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
	margin: 0;
	padding: 0;
	color: #fff;
	text-align: center;

.container
	width: 800px ;
	height: 200px ;
	background: #4c77f2;
	position: absolute; 
	top:50%; 
	left: 50% ;
	margin-top: -100px;
	margin-left: -400px;

</style>
</head>
<body>
    <div class="container">这是页面内容</div>
</body>
</html>

2 二行布局

行布局固定宽
行布局某部位自适应
行布局导航随屏幕滚动

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
	margin: 0;
	padding:0;
	color: #fff;
	text-align: center;
	font-size:16px;

.header
	width: 100%; 
	height: 50px; 
	background: #333;
	margin:0 auto;
	line-height: 50px;
	position: fixed;

.banner
	width: 800px;
	height: 300px; 
	background: #30a457;
	margin:0 auto; 
	padding-top: 50px; 

.container
	width :800px;
	height: 400px;
	background: #4c77f2;
	margin:0 auto;

.footer
	width: 800px;
	height: 100px; 
	background: #333;
	margin:0 auto; 
	line-height: 100px;
 
</style>
</head>
<body>

    <div class="header">这是页面的头部</div>
    <div class="banner">这是页面的banner图</div>
    <div class="container">这是页面的内容</div>
    <div class="footer">这是页面的底部</div>
	
</body>
</html>

3 一列布局

两列布局固定
两列布局自适应

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body
	margin: 0;
	padding: 0;
	color: #fff;

.container
	width:90%; 
	height: 800px;
	margin:0 auto; 

.left
	width:60%;
	height: 800px; 
	background: #1a5acd; 
	float: left;

.rightwidth: 40%; 
	height: 800px; 
	background: #5880f9; 
	float: right;

</style>
</head>
<body>
    <div class="container">
        <div class="left">这是页面的左侧</div>
        <div class="right">这是右面的右侧</div>
    </div>
</body>
</html>

4 二列布局

三列布局固定
三列布局自适应

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body
	margin: 0;
	padding: 0;
	color: #fff;

.container
	width: 100%;
	margin: 0 auto;

.left
	width: 30%;
	height: 800px;
	background: #67b581;
	float: left;

.right
	width: 20%;
	height: 800px;
	background: #67b581;
	float: right;

.middle
	width: 50%;
	height: 800px;
	background: #175bd8;
	float: left;

</style>
</head>
<body>
    <div class="container">
        <div class="left">这是页面的左侧</div>
        <div class="middle">这是页面的中间</div>
        <div class="right">这是页面的右侧</div>
    </div>
</body>
</html>

5 混合布局

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body
	margin: 0;
	padding: 0;
	font-size: 16px;
	color: #fff;
	text-align: center;

.header
	width: 800px;
	height: 50px;
	background: #5880f9;
	margin: 0 auto;
	line-height: 50px;

.container
	width: 800px;
	margin: 0 auto;
	height: 600px;

.container .left
	width: 200px;
	height: 600px;
	background: #67b581;
	float: left;

.container .right
	width: 600px;
	height: 600px;
	background: #d0d0d0;
	float: right;

.footer
	width: 800px;
	height: 100px;
	background: #ed817e;
	margin: 0 auto;
	line-height: 100px;

</style>
</head>
<body>
    <div class="header">这是页面的头部</div>
    <div class="container">
        <div class="left">这是页面的左侧</div>
        <div class="right">这是页面的右侧</div>
    </div>
    <div class="footer">这是页面的底部</div>
</body>
</html>

6 经典布局

圣杯布局（middle 部分首先放在 container 的最前部分，然后是 left,right)

布局要求

1、三列布局，中间宽度自适应，两边定宽

2、中间栏要在浏览器中优先展示渲染

3、允许任意列的高度最高

4、用最简单的 CSS、最少的 HACK 语句

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *
            margin: 0;
            padding: 0;
        
        body
            min-width: 700px;
        
        .header,
        .footer
            float: left;
            width: 100%;
            background: #ddd;
            height: 40px;
            line-height: 40px;
            text-align: center;
        
        .container
            padding: 0 220px 0 200px;
        
        .left,
        .middle,
        .right
            position: relative;
            float: left;
            min-height: 300px;
        
        .middle
            width: 100%;
            background: #1a5acd;
        
        .left
            width: 200px;
            background: #f00;
            margin-left: -100%;
            left: -200px;
        
        .right
            width: 220px;
            background: #30a457;
            margin-left: -220px;
            right: -220px;
        
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>这是页面中间的内容</p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>这是页面左侧的内容</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>这是页面右侧的内容</p>
        </div>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>

7 双飞翼布局(main 要放在最前边，其次是 sub,extra）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *
            margin: 0;
            padding: 0;
        
        body
            min-width: 700px;
        
        .header,
        .footer
            width: 100%;
            float: left;
            height: 40px;
            background: #ddd;
            text-align: center;
            line-height: 40px;
        
        .sub,
        .main,
        .extra
            float: left;
            min-height: 300px;
        
        .main
            width: 100%;
        
        .main-inner
            margin-left: 200px;
            margin-right: 220px;
            background: #30a457;
            min-height: 300px;
        
        .sub
            width: 200px;
            background: #f00;
            margin-left: -100%
        
        .extra
            width: 220px;
            background: #1a5acd;
            margin-left: -220px;
        
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="main">
        <div class="main-inner">
            <h4>main</h4>
            <p>这是页面的中间内容</p>
        </div>
    </div>
    <div class="sub">
        <h4>sub</h4>
        <p>这是页面的左侧内容</p>
    </div>
    <div class="extra">
        <h4>extra</h4>
        <p>这是页面的右侧内容</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body> 
</html>

CSS 底部固定的实现方法

移动端开发中，经常会见到页面底部始终在整个屏幕最底部显示的效果，如下图所示：无论屏幕如何向下滚动图示中蓝色框住的部分都在页面中处于最底部的位置。

如果这个部分不做特殊固定处理，正常情况下，当内容足够多时，必须滑到浏览器底部才能看到底部这个模块，如果内容不够多，不足以撑开元素到达浏览器的底部时，底部可能不是显示在浏览器的最下方哦。

初始状态

显示效果如下图，如果不将页面拉到最下方，无法看

以上是关于如何实现css布局三行二列布局代码．的主要内容，如果未能解决你的问题，请参考以下文章

div+css布局完整代码三行两列另外如果把两列分为四格怎么做

如用css如何实现下图的布局

HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局）

前端面试 CSS— CSS 如何实现“圣杯”布局？

div+css怎么显示两行或三行文字，然后多出的部分省略号代替？？

CSS 网页布局基础