DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.

最新推荐文章于 2021-06-09 23:49:56 发布
最新推荐文章于 2021-06-09 23:49:56 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： CSS

DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过.
辛苦几天的结果啊
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.

下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了.

.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth  <  760 ? "760px": "100%" )/*最小宽度设置*/;width:100%;}
.DivMainLeft{float:left;}
.DivMainRight{margin-left:210px;}


原来粘贴错了.现在好了.不好意思.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <style>
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}
 .divGlobal{/*border:1px solid #ff0000;*/}
.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}
.DivBottom {clear: both;}
.DivMainLeft{float:left;}
.DivMainRight{margin-left:210px;}
.DivFiexWidth{width:200px;}
.DivMainRightChild{}
.clear{clear: both;}
 ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}
 li.li1{margin-left:0px;list-style-type:none;}
 li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}
  </style>
 </HEAD>

 <BODY>
  <script>
// alert(document.body.clientWidth);
 //alert(document.body.clientWidth < 760? "760px": "100%" );
  </script>
<div class="DivTop">
top
</div>
  <div class="divGlobal">
   <div class="DivMainLeft">
    <div class="DivFiexWidth">
     <ul class="ul1">
    <li class ="liBg">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
     </ul>
    </div>
   <div class="DivFiexWidth">
     <ul class="ul1">
    <li class ="liBg">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
     </ul>
    </div>
   <!-- <div class="DivFiexWidth">
     <ul class="ul1">
    <li class ="liBg">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
     </ul>
    </div>
     <div class="DivFiexWidth">
     <ul class="ul1">
    <li class ="liBg">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
     </ul>
    </div>
     <div class="DivFiexWidth">
     <ul class="ul1">
    <li class ="liBg">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
    <li class ="li1">左边固定宽度</li>
     </ul>
    </div> -->
   </div>

  <div class="DivMainRight">
    <div class="DivMainRightChild" >
      <ul class="ul1">
     <li class ="liBg">右边宽度自适应.</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
      </ul>
    </div>
    <div class="DivMainRightChild" >
      <ul class="ul1">
     <li class ="liBg">右边宽度自适应.</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
      </ul>
    </div>
    <div class="DivMainRightChild" >
      <ul class="ul1">
     <li class ="liBg">右边宽度自适应.</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
     <li class ="li1">右边宽度自适应</li>
      </ul>
    </div>

   </div>
 </div>

 

<div class="DivBottom">
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.
辛苦几天的结果啊
平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.
</div>
 </BODY>
</HTML>

 

原文出处：http://www.cnblogs.com/adandelion/archive/2007/05/25/759858.html

kyleing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS创建两栏布局（左侧宽度固定，右侧宽度自适应）的几种方式
webchang的博客
04-03 1642
CSS创建两栏布局的方法（代码演示）
详解左右宽度固定中间自适应html布局解决方案
09-22
通过设置`.left`和`.right`元素的`float:left`和`float:right`属性，使它们分别浮动至左侧和右侧，同时设置固定宽度。中间的`.center`元素会自动占据剩余空间。需要注意的是，要确保先渲染左、右浮动元素，然后是...
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度
TOMOROW的专栏
11-10 1774
 DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过.辛苦几天的结果啊平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了. .divGlobal,.DivTop
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条....
weixin_30381793的博客
05-25 63
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过.辛苦几天的结果啊平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了. .divGlobal,.DivTop,.D...
[CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽
weixin_30437337的博客
12-27 123
一种常见的3列布局，左右两列固定宽度、中间列自适应满宽。整个网页不出现横向滚动条 纯CSS实现 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> ...
css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
beichen3997的博客
06-20 6287
方法一：浮动布局这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果HTML Markup&lt;div id="left"&gt;Left sidebar&lt;/div&gt; &lt;div id="content"&gt;Main Content&lt;/div&gt;CSS Code&lt;style type="text
html左右超出显示滚动条,div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？...
weixin_39917718的博客
06-09 1094
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？纯手写 滚动条隐藏掉就行了CSS:*{margin:0px;padding:0px;}.wrap{overflow: hidden;height: 40px;}.cont{height: 60px;overflow-x: auto;overflow-y:hidden ;position: relative;}.state {left: ...
java窗口大小与分辨率自适应_css判断不同分辨率显示不同宽度布局实现自适应宽度...
weixin_39974882的博客
03-04 305
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也...CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断，但IE9以下版本不支持CSS3技术，这里DIV...
DIV+CSS 一行两列的简单代码（左列固定宽度,右列自适应宽度 ）
09-05 1163
<!--google_ad_client = "pub-6251330221539112";/* 336x280 csdn.net内容 */google_ad_slot = "3096601444";google_ad_width = 336;google_ad_height = 280;//--><script type="text/javascript"sr
css判断不同分辨率显示不同宽度布局实现自适应宽度
12-13
CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动...
CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
09-24
本文将详细介绍如何使用CSS实现“左侧固定宽，右侧自适应”的布局，并确保兼容所有浏览器。这种布局常见于各种网站，比如博客、新闻网站或者含有侧边栏的页面。 首先，我们要明确“左侧固定宽，右侧自适应”的布局...
基于HTML5 div+css布局的视频网站，实现视频播放、音乐播放以及图片浏览功能.zip
02-12
结合CSS3，开发者可以使用新的布局模式，如Flexbox或Grid，创建响应式和自适应的布局。Flexbox提供了一种灵活的方式来对齐和排列内容，而Grid则允许创建二维的网格布局，非常适合用于复杂的页面设计。 3. **Media ...
Div+CSS基础代码网页布局+实例教程.docx
02-27
在描述中提到的“CSS宽度自适应”是指通过CSS来创建能够根据浏览器窗口大小变化而自动调整宽度的布局。例如，`width:80%`让元素的宽度设置为其父元素宽度的80%，这样在不同屏幕尺寸下都能保持良好的视觉效果。 CSS...
2019年中国民航大学电子制作比赛---蓝牙音响.zip
08-03
大学生参加学科竞赛有着诸多好处，不仅有助于个人综合素质的提升，还能为未来职业发展奠定良好基础。以下是一些分析： 首先，学科竞赛是提高专业知识和技能水平的有效途径。通过参与竞赛，学生不仅能够深入学习相关专业知识，还能够接触到最新的科研成果和技术发展趋势。这有助于拓展学生的学科视野，使其对专业领域有更深刻的理解。在竞赛过程中，学生通常需要解决实际问题，这锻炼了他们独立思考和解决问题的能力。 其次，学科竞赛培养了学生的团队合作精神。许多竞赛项目需要团队协作来完成，这促使学生学会有效地与他人合作、协调分工。在团队合作中，学生们能够学到如何有效沟通、共同制定目标和分工合作，这对于日后进入职场具有重要意义。 此外，学科竞赛是提高学生综合能力的一种途径。竞赛项目通常会涉及到理论知识、实际操作和创新思维等多个方面，要求参赛者具备全面的素质。在竞赛过程中，学生不仅需要展现自己的专业知识，还需要具备创新意识和解决问题的能力。这种全面的综合能力培养对于未来从事各类职业都具有积极作用。 此外，学科竞赛可以为学生提供展示自我、树立信心的机会。通过比赛的舞台，学生有机会展现自己在专业领域的优势，得到他人的认可和赞誉。这对于培养学生的自信心和自我价值感非常重要，有助于他们更加积极主动地投入学习和未来的职业生涯。 最后，学科竞赛对于个人职业发展具有积极的助推作用。在竞赛中脱颖而出的学生通常能够引起企业、研究机构等用人单位的关注。获得竞赛奖项不仅可以作为个人履历的亮点，还可以为进入理想的工作岗位提供有力的支持。
22NM60N-VB TO220一款N-Channel沟道TO220的MOSFET晶体管参数介绍与应用说明
08-03
22NM60N-VB TO220；Package：TO220；Configuration：Single-N-Channel；VDS：650V；VGS：30（±V）；Vth：3.5V；RDS(ON)=160mΩ@VGS=10V；ID：20A；Technology：SJ_Multi-EPI；
22N60L-VB一款N-Channel沟道TO247的MOSFET晶体管参数介绍与应用说明
08-03
22N60L-VB；Package：TO247；Configuration：Single-N-Channel；VDS：650V；VGS：30（±V）；Vth：3.5V；RDS(ON)=160mΩ@VGS=10V；ID：20A；Technology：SJ_Multi-EPI；
GIS在地质灾害中的应用.pptx
最新发布
08-03
GIS在地质灾害中的应用.pptx
div+css 横向滚动公告，公告只有一条 自适应公告长度
06-02
要实现只有一条并且自适应长度的横向滚动公告，可以使用CSS3的flex布局和animation动画。具体步骤如下： 1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值