HTML左中右div布局

ゞ浴缸里的玫瑰 2023-07-13 10:44 18阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title>Document</title>
    	<style type="text/css">
    		*{ 
    			margin: 0;padding: 0
    		}
    		#wrap{ 
    			width:100%;  
    			margin:0 auto;  
    		}  
    		#header{ 
    			/* margin:20px; */
    			height:80px;  
    			border:solid 1px #0000FF;  
    		}  
    		#container{ 
    			position:relative;  
    			margin-top:20px;  
    			height:400px;  
    		}  
    		#left_side{ 
    			position:absolute;  
    			top:0px;  
    			left:0px;  
    			border:solid 1px #0000FF;  
    			width:170px;  
    			height:100%;  
    		}  
    		#content{ 
    			margin:0px 190px 0px 190px;  
    			border:solid 1px #0000FF;  
    			height:100%;  
    		}  
    		#right_side{ 
    			position:absolute;  
    			top:0px;  
    			right:0px;  
    			border:solid 1px #0000FF;  
    			width:170px;  
    			height:100%;  
    		}  
    		#footer{ 
    			margin-top:20px;  
    			height:80px;  
    			border:solid 1px #0000FF;  
    		}  
    	</style>
    </head>
    <body>
    	<div id="wrap">  
    		<div id="header">header</div>  
    		<div id="container">  
    			<div id="left_side">left_side</div>  
    			<div id="content">content</div>  
    			<div id="right_side">right-side</div>  
    		</div>  
    		<div id="footer">footer</div>  
    	</div>  
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关写一个html 上左中右下布局

以下是一个简单的 HTML 页面，其中包括上、左、中、右和下的布局。您可以使用CSS来自定义布局的样式。 <!DOCTYPE html> <html>

迷南。/ 2024年03月25日 18:52/ 0 赞/ 72 阅读

相关 HTML左中右div布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <

ゞ浴缸里的玫瑰/ 2023年07月13日 10:44/ 0 赞/ 19 阅读

相关 CSS-div水平居左-居右-居中显示

知识点 1.div是块级元素,特性是块级元素独占一行显示,三个div默认会显示三行。 2.在div块级元素,加上css的display:inline属性可以修改成

川长思鸟来/ 2023年07月01日 14:58/ 0 赞/ 10 阅读

相关 html布局垂直居中显示,【html】【10】div布局[div水平垂直居中]

必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为： .style\{margin:0 auto;\} 数

╰半橙微兮°/ 2022年10月09日 04:58/ 0 赞/ 286 阅读

相关 css实现div从左到右出现,css横向排列_css div 实现图片从左向右自动横向排列

摘要腾兴网为您分享:css div 实现图片从左向右自动横向排列，追书神器，中英翻译，优酷，武魂传说等软件知识，以及宝app，安卓串口，爱奇艺看图软件，爆枪英雄好号送，手机短

落日映苍穹つ/ 2022年09月02日 14:54/ 0 赞/ 212 阅读

相关 html -- div table布局 -- 加布局简单例子

div布局，div.html： <!DOCTYPE html> <html> <head> <meta name="generat

快来打我*/ 2022年07月18日 00:25/ 0 赞/ 210 阅读

相关 HTML - 布局div

http://[blog.csdn.net/pipisorry/article/details/78929615][blog.csdn.net_pipisorry_articl

今天药忘吃喽~/ 2022年06月02日 01:28/ 0 赞/ 593 阅读

相关 Div+Css实现经典左中右布局

三栏布局，中间自适应高度效果图: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

雨点打透心脏的1/2处/ 2022年04月24日 09:52/ 0 赞/ 293 阅读

相关 HTML DIV标签布局

这个代码是我学习制作网页时候在网上搜索的到的一篇文章，我也是第一次学，当我看到这个代码的时候首先想到的是创建文本然后复制，保存为test.html。打开先看看实现了怎么样的功能

╰半橙微兮°/ 2022年02月01日 19:13/ 0 赞/ 617 阅读

相关网页三栏布局五种实现方式（左中右）

适用：高度固定左右宽度固定中间自适应 <html> <head> <title>三栏布局</title>

深碍√TFBOYSˉ_/ 2021年08月28日 20:05/ 0 赞/ 668 阅读