`
李俊良
  • 浏览: 145230 次
  • 性别: 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 ...

    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-浏览器。...

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

    布局很简单，左边一个div，右边一个div，中间的div是用来拖动的。 复制代码代码如下: &lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt; &lt;html&gt; &lt;head...

    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