`
李俊良
  • 浏览: 146121 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

左侧固定 右侧自适应两栏布局

 
阅读更多 

<!DOCTYPE html>
<html>
<head>
<style>
div{
	height:300px;
}
#demo1{
	padding-left:300px;
	background-color:black;
}
#fix-demo1{
	margin-left:-300px;
	width:300px;
	background-color:red;
	float:left;
	_margin-left:-150px;
}
#auto-width1{
	width:100%;
	background-color:yellow;
	float:left;
}
</style>
</head>
<body>
<div id="demo1">
	<div id="fix-demo1">
		my width is fixed 300
	</div>
	<div id="auto-width1">
		my width is auto
	</div>
</div>
</body>
</html>
 
分享到：
| 程序的表达爱情方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    左侧固定右侧自适应css样式.zip

    在网页设计中，"左侧固定右侧自适应css样式"是一种常见的布局模式，它通常用于创建具有侧边栏和主要内容区域的界面。在这种布局中，左侧栏保持固定宽度，不论窗口大小如何变化，始终保持在屏幕左侧不变；而右侧内容...

    div+css模板布局 右侧固定，左侧自适应

    例如，使用Flexbox或Grid进行主内容区的自适应布局，同时配合定位实现固定侧边栏。为了确保兼容性，可以使用CSS预处理器（如Sass或Less）和自动化工具（如Autoprefixer）来处理浏览器前缀和回退方案。 最后，关于...

    左固定右边自适应框架

    在具体应用“左固定右边自适应框架”时，开发者通常会使用CSS的position属性来定位左侧固定栏，设置为fixed，然后用width设定固定宽度。右侧栏则使用相对布局（relative）或Flexbox或Grid Layout，让其宽度自动填充...

    左侧固定宽度，右侧自适应宽度的CSS布局

    要实现左侧固定宽度，右侧自适应宽度的CSS布局，首先需要了解几个关键的CSS属性和概念。这些包括宽度（width）、绝对定位（position: absolute）、层叠上下文（z-index）、以及外边距（margin）等。 1. 宽度（width...

    css实现左侧固定右侧自适应的布局方式

    在前端开发中，实现左侧固定宽度、右侧自适应宽度的布局是一种常见的需求，这样的布局能够适应不同屏幕大小，提高页面布局的灵活性和用户体验。以下将介绍三种使用CSS来实现这种布局的方式。 ### 浮动布局（Float ...

    左右两栏布局右侧自适应+左右拖动改变两栏宽度

    在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...

    div宽度自适应布局(左边自适应)

    在左边自适应布局中，可以将左侧区域设为自适应的网格轨道，而右侧区域可以设定为固定宽度或自适应的网格轨道。 六、媒体查询（Media Queries） 为了实现跨设备的宽度自适应，可以使用CSS媒体查询。媒体查询允许...

    div宽度自适应布局(右边自适应)

    在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...

    懒人原生固定侧栏宽度自适应全屏页面布局

    我们经常能看到一些网站的后台管理系统，左侧竖导航往往都是一个固定的大小，右侧是一个自适应的div，无论你的浏览器多宽，右侧部分使用可以撑满剩下部分。记得09年之前，很多都是用一个大的table来实现，其实不然...

    CSS实现两栏布局，左边固定，右边自适应的4种方法

    1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。...

    CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

    左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可以说第一条要求已不是什么要求了； 左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局...

    CSS三栏布局探讨——中间固定宽度两边自适应宽度

    首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能包含导航菜单，右侧放置辅助信息，中间则是主要内容。一个简单的实现方式是...

    CSS布局实例[绝对定位:一栏固定,一栏自适应]

    2. **固定宽度栏**：对于固定宽度的一栏（如侧边栏），我们可以设置其绝对定位，并指定左边距（left）或右边距（right）来确定其位置。同时，设置宽度（width）和高度（height）。 ```css .sidebar { position: ...

    三栏布局--左右宽度固定，中间自适应宽度

    这种布局的特点是左边栏和右边栏的宽度固定不变，而中间的主体内容区域可以根据实际内容自动扩展或收缩。本文将详细介绍三种实现三栏布局的方法：通过设置浮动、利用负边距以及采用绝对定位。 #### 方法一：设置...

    三栏布局自适应wordpress主题

    【三栏布局自适应WordPress主题】是网页设计领域中一种常见的布局模式，它将网页内容分为左侧栏、中间主栏和右侧栏，为用户提供清晰、结构化的浏览体验。这种主题在WordPress平台上尤其受欢迎，因为WordPress提供了...

    css3左侧导航固定页面无限滚动布局模板

    【CSS3左侧导航固定页面无限滚动布局模板】是一种在网页设计中常见的布局方式，尤其在2014年后成为一种流行趋势。这种布局的核心在于，它将导航菜单固定在页面的左侧，无论用户如何滚动页面，菜单始终保持可见，提供...

Magicbox
Global site tag (gtag.js) - Google Analytics