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

最新推荐文章于 2021-10-08 15:50:41 发布
最新推荐文章于 2021-10-08 15:50:41 发布
阅读量3.8k 收藏 1
点赞数
文章标签： css 布局 div html

转自：http://www.cnblogs.com/adandelion/archive/2007/05/25/759858.html



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>


xiaoxiali
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html要创建一个1行2列的表,day02_HTML表格列表表单
weixin_29532173的博客
06-17 2453
会涉及关于表格、表单、列表的讲解表格：显示数据表单：获取用户数据列表：控制布局一、表格主要用于数据展示1.1 创建表格我是单元格1我是单元格2table、tr、td，他们是创建表格的最基本标签，具体地解释：table用于定义一个表格。tr 定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。td 定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就...
css判断不同分辨率显示不同宽度布局实现自适应宽度
12-13
CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动...
html左200px右边自适应,2种方法实现经典的左侧固定宽度200px，右侧自适应宽度的布局...
weixin_39867327的博客
06-17 1147
今天去面试前端人员，随即出了一个经典的布局问题，即如标题所示。可是结果令我很惊讶，超过一半的人都没答对，亦或是只答对一半！在此记录下用两种方法，第一种普通的方法，第二种是利用flex布局。首先我们假定页面上已有下列元素：第一种方法：float+margin-left这种方法是最简单也是最容易想到的方法(至少在我看来)，请看如下CSS：div{height:200px;}#left{float: l...
div css 一行两列,div+css如何做页面的一行两列布局？
weixin_29139581的博客
08-03 553
center_tdbgall{background:#ffffff;width:900px;}.middle400 {float:left; width:400px; padding:5px}.middle250 {float:left; width:250px; padding-bottom:5px}.middle250r {float:right; width:215; padding:5px...
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
热门推荐
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
DIV+CSS 一行两列布局
weixin_30376083的博客
04-22 1181
CSS代码： css代码.main{width:800px;/*总的宽度*/background:red;}.main.col1{float:left;/*这个是关键的地方让col1往左浮动，这样它的后面（右边）就可以放置别的元素*//*（别的元素：可以是div，图片，文字等）*/width:300px;height:300px;background:#eee;border:1...
HTML 一行两列 - div块儿并列显示
SAGGITARXM
09-10 8035
一行两列 - div块儿并列显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<form name="a...
html一行2列页面,DIV+CSS一行两列布局_html/css_WEB-ITnose
weixin_30823465的博客
06-04 1711
CSS代码：css代码.main{width:800px;/* 总的宽度 */background:red;}.main .col1{float:left;/* 这个是关键的地方 让col1往左浮动，这样它的后面(右边)就可以放置别的元素*//*(别的元素：可以是div，图片，文字等) */width:300px;height:300px;background:#eee;border:1px so...
零基础HTML教程(22)--表格:我的重要性毋庸置疑
程序员大阳
10-08 1495
本文目录1. 前言2. 表格标签3. 表格的行与列4. 页眉5. 页脚6. 小结 1. 前言 表格有多重要我就不需要赘述了吧，我们日常访问的网页处处都有表格，所以表格是非常非常重要的HTML元素。 本篇我们就来简单介绍下表格的用法。 2. 表格标签 我们可以使用<table>标签来定义一个表格，然后使用border属性来设定表格边框的宽度，如下。 注意此时表格里面还没有内容，所以网页也显示不出什么东西来。 <table border="1"> </table>
【css】css实现div两列布局（固定和自适应）（两种方法）
金金的博客
08-19 8786
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.实现目标 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2、思路 1、让两个div并排到一行 div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； 2、一个div宽度固定，另一个div自适应剩下的宽度 对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属
HTML中如何对DIV使用列布局（两列三列等）
lu18225857116的博客
11-08 1万+
1.没使用浮动（float）效果时是  div之间是上下布局 2.使用浮动（float）进行布局时，像左边布局，margin-left为最距外边距的那段距离 #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; w
使用HTML开发商业网站-DIV+CSS布局 布局的其他属性课件.pptx
07-10
布局其他属性 布局其他属性 overflow属性可以解决溢出问题，其基本语法格式如下： ...在需要时产生滚动条，即自适应所要显示的内容 scroll 溢出内容会被修剪，且浏览器会始终显示滚动条 布局其他属性 谢谢大家
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
js弹出框 javascript弹出框 div+css弹出层效果 弹出登录框
06-10
3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置...
2021数学建模美赛C题代码.zip
04-24
最全的数学建模美赛C题和代码、大量刷题题库、逻辑清晰易于学习
这是一个保存Springboot+MyBaits项目的仓库.zip
最新发布
04-24
springboot框架 一、Spring Boot基础应用 Spring Boot特征 概念： 约定优于配置，简单来说就是你所期待的配置与约定的配置一致，那么就可以不做任何配置，约定不符合期待时才需要对约定进行替换配置。 特征： 1. SpringBoot Starter：他将常用的依赖分组进行了整合，将其合并到一个依赖中，这样就可以一次性添加到项目的Maven或Gradle构建中。 2,使编码变得简单，SpringBoot采用 JavaConfig的方式对Spring进行配置，并且提供了大量的注解，极大的提高了工作效率，比如@Configuration和@bean注解结合，基于@Configuration完成类扫描，基于@bean注解把返回值注入IOC容器。 3.自动配置：SpringBoot的自动配置特性利用了Spring对条件化配置的支持，合理地推测应用所需的bean并自动化配置他们。 4.使部署变得简单，SpringBoot内置了三种Servlet容器，Tomcat，Jetty,undertow.我们只需要一个Java的运行环境就可以跑SpringBoot的项目了
课设&大作业-毕业设计精品课程网站，采用的技术是 SSM 框架和 Shiro.zip
04-24
【资源说明】【毕业设计】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等)的同学或企业员工下载使用，具有较高的学习借鉴价值。 3、不仅适合小白学习实战练习，也可作为大作业、课程设计、毕设项目、初期项目立项演示等，欢迎下载，互相学习，共同进步！
c#做的综合上位机，服务于freescale智能车&电子设计.zip
04-24
c#做的综合上位机，服务于freescale智能车&电子设计.zip
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、付费专栏及课程。

余额充值