超强的左中右布局

最新推荐文章于 2024-05-18 16:11:19 发布

milijiangjun

最新推荐文章于 2024-05-18 16:11:19 发布

阅读量1.2k

点赞数

分类专栏： WebSan

本文链接：https://blog.csdn.net/milijiangjun/article/details/108362534

版权

需求：
需要在某个界面进行左中右布局，例如当当网的书籍检索：
在这里插入图片描述
我们需要做成这个样子
背景颜色为统一的。右侧为白底色
所以我们用

左右布局
	右中在包括 左右

然后我们实现的代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<style type="text/css">

 	*{
   margin: 0px; padding: 0px;}
		.SCont{
   
			 width: 100%;
		  height: 500px;
		 
		}
		.no{
   width: 100%; height: auto;border: 1px solid red ; background-color: yellow; }
		.nol{
   float: left; width: 100px;  }
		.nor{
   margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;}
		.norc{
   position:absolute;right:60px;top:0px}
 	</style>
 </head>
 <body>
  <!-- background-color: red; -->
 	<div class="SCont" >
		<div class="no" >
				<div class="nol" >左边</div>
				<div class="nor" >
				<div>内容内容内内容内容  </div><div class="norc" >多选更多</div></div>

		</div>
	 
 	</div>
 </body>
 </html>

在这里插入图片描述
结合到我们的vue 项目中的为：

<style lang="scss" scoped>
// this a check style   
    .SCont{
     width: 100%;  height: 500px; 	}
		.no{
   width: 100%; height: auto; background-color: #fef8f5; }
		.nol{
   float: left; width: 100px;  span{
   line-height: 35px;} }
		.nor{
   margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
		.norc{
   position:absolute;right:60px;top:0px;min-height: 35px;}
    .nor_1,.nor_2,.nor_3{
   min-height: 35px;}

    .pub{
   width: 100%; height: auto; background-color: #fef8f5; }
		.publ{
   float: left; width: 100px;  span{
   line-height: 35px;} }
		.pubr{
   margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
		.pubc{
   position:absolute;right:60px;top:0px;min-height: 35px;}
    .pubr_1,.pubr_2,.pubr_3{
   min-height: 35px;}

    .gat{
   width: 100%; height: auto; background-color: #fef8f5; }
		.gatl{
   float: left; width: 100px;  span{
   line-height: 35px;} }
		.gatr{
   margin: 0 0 0 100px; padding-right: 150px; background-color: white;position:relative;line-height: 35px;}
		.gatc{
   position:absolute;right:60px;top:0px;min-height: 35px;}
    .gatr_1,.gatr_2,.gatr_3{
   min-height: 35px;}

    .prc{
   width: 100%; height: auto; backgrou

最低0.47元/天解锁文章

milijiangjun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
超强的左中右布局

需求：需要在某个界面进行左中右布局，例如当当网的书籍检索：我们需要做成这个样子背景颜色为统一的。右侧为白底色所以我们用左右布局右中在包括左右然后我们实现的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
复制链接

扫一扫