`

div css 左列固定，右列宽度自适应

 
阅读更多

转载的，发现跟我以前所理解大不一样，原文http://www.aa25.cn/div_css/266.shtml

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二列左列固定，右列宽度自适应——AA25.CN</title>
<style type="text/css">
<!--
#left {
 background-color: #E8F5FE;
 border: 1px solid #A9C9E2;
 float: left;
 height: 300px;
 width: 200px;
}
#right {
 background-color: #F2FDDB;
 border: 1px solid #A5CF3D;
 height: 300px;
}
-->
</style>
</head>

<body>
<div id="left">左列——固定(AA25.CN)</div>
<div id="right">右列——宽度自适应(AA25.CN)</div>
</body>
</html>
文章出处：标准之路(http://www.aa25.cn/div_css/266.shtml)

 

 

注意，如果在#right中加入 floating：left，则ring的div将会根据div包含的内容的宽度而显示

分享到：
| js中感觉比较怪异的一些问题
评论
发表评论

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

相关推荐

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

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

    css+div自适应窗口宽度

    css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度css+div自适应窗口宽度

    div+css菜单导航布局自适应宽度

    div+css菜单导航布局自适应宽度，纯div+css

    CSS 实现div宽度根据内容自适应

    最近做了个项目，其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识，需要的朋友参考下

    使用JS+CSS实现DIV层自适应高度和宽度

    用JS+CSS来实现DIV层自适应高度，无论你的浏览器大小如何变化都会自适应高度， 调节宽度同样的道理

    css实现右侧固定宽度 左侧宽度自适应

    不管是左是右，反正就是一边宽度固定，一边宽度自适应。 这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等）

    css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等

    div+css实现自适应宽度按钮

    答案：可以使用背景图片的左对齐和右对齐来实现自适应宽度按钮的效果。 3. 什么是浮动布局？ 答案：浮动布局是一种CSS布局方式，能够使元素浮动在父元素中，实现自适应宽度按钮的效果。 4. 如何使用a标签和span...

    独行DIV自适应宽度布局CSS实例与应用范围

    独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度，也就是单独一行宽度自适应DIV的布局。通过DIV CSS实例CSS自适应宽度布局方法，再过常见用处介绍充分掌握自适应独占一行一列的...

    HTML实现2列布局(左侧宽度固定，右侧自适应)的方法示例

    HTML实现2列布局，左侧宽度固定，右侧自适应 实现一： &lt;style&gt; body, html{padding:0; margin:0;} // 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...

    css控制宽度（高度）自适应100%

    demo包括： 1、多个div并排，宽度自适应100％ - 左右两侧div宽度固定，中间DIV占满剩余区域 ； 2、多个div，高度自适应100％ - 页面布局：头，身体，脚，占满整个屏幕；

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

    布局很简单，左边一个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布局

    设置content距离right的左侧为200px，即刚巧等于left的宽度。” 这个布局有一个缺点就是，如果我设置了foot的div，试了很多办法，都不能根据content的高度，连着中间的内容，自动置于HTML页面的底部。如有牛人知道...

    CSS网页布局入门教程8：三列浮动中间列宽度自适应

    CSS网页布局入门教程8：三列浮动中间列宽度自适应 在本篇教程中，我们将探讨如何使用CSS实现三列浮动中间列宽度自适应的网页布局。这种布局方式需要满足以下要求：左栏固定宽度，居左显示；右栏固定宽度，居右显示...

    vue中实现拖动调整左右两侧div的宽度的示例代码

    还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们...

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

    今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间...

    关于div自适应高度/左右高度自适应一致的js代码

    在DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题，本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js

    CSS三列布局两端固定宽度中间自适应

    两端固定宽度，中间自适应结构： 复制代码代码如下: &lt;div class=”wrap”&gt; &lt;div class=”main”&gt; &lt;div class=”content”&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=”submain”&gt;2&lt;/div&gt; &lt;div class=”sidebar”&gt;3&lt;/div&gt; &lt;/div&gt; ...

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

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

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