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

最新推荐文章于 2023-04-21 22:55:31 发布
最新推荐文章于 2023-04-21 22:55:31 发布
阅读量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
关注
专栏目录
html要创建一个1行2列的表,day02_HTML表格列表表单
weixin_29532173的博客
06-17 2534
会涉及关于表格、表单、列表的讲解表格：显示数据表单：获取用户数据列表：控制布局一、表格主要用于数据展示1.1 创建表格我是单元格1我是单元格2table、tr、td，他们是创建表格的最基本标签，具体地解释：table用于定义一个表格。tr 定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。td 定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就...
css3--实现最小宽的的方法（带滚动条）
sevenbblythelulu的博客
08-18 4805
.box{width:expression_r(document.body.clientWidth min-width:300px;}
css 横向滚动条
a5252145的博客
07-06 481
横向滚动条 white-space: nowrap; min-width: 900px; overflow-x: auto; 效果图：
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度 .
01-06 1005
divGlobal, DivTop, DivBottom{min-width: 760px;width: expression(document body clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;} divGlobal{/*border:1px solid #ff0000;*/} DivTop, Di
两列布局——左侧宽度固定，右侧宽度自适应的两种方法
ken_ding的博客
12-20 572
1.原理：就是利用左侧元素浮动，或者绝对定位的方式使其脱离常规文档流，让两个块级元素能够在同一行显示。然后右侧元素 margin-left 的值等于左侧元素宽度，这时右侧元素将紧挨着左侧元素，由于块元素的宽度会自动默认充满剩下的屏幕，所以就实现了右侧自适应的效果了HTML代码如下：<!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"
两列布局：左边定宽，右边自适应（撑满）
sd2131512的专栏
01-31 6025
    ]]>  方法一：浮动实现#id1 { background-color: #000; width:100px; float:left; height:200px;} #id2 { background-color: #0f0; height:200px;}   方法二：绝对定位实现#id1 { backg
html设置最小宽度 滚动条,CSS教程:如何设置自动显示隐藏scrollbar滚动条，自定义外观样式/宽度，附demo示例大全...
weixin_35568959的博客
06-02 1206
显示滚动条当一个div的内容大于父容器的大小时，可设置 overflow: scroll自动显示滚动条：div {width:150px;height:150px;overflow:scroll;}overflow更多属性值如下：visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其...
左右两列定宽，中间自适应的方法
fydxx的博客
03-06 516
1. 使用flex布局&lt;div class="container"&gt; &lt;div class="left"&gt;left&lt;/div&gt; &lt;div class="middle"&gt;middle&lt;/div&gt; &lt;div class="right"
CSS实现两列布局
渐行渐远
08-03 604
右侧内容固定，左侧内容自适应：（需要注意，HTML结构中固定宽度，必须在自适应宽度前面）
html css放在右边,HTMLCSS实现左侧固定宽度右侧内容可滚动
weixin_35763787的博客
08-03 608
在做移动端页面的时候，经常会碰到一个div中分左右两个div，左侧div固定宽度或百分比，右侧div中内容左右溢出，需要左右滑动才可以浏览到全部内容，为此写了一个demo。处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比，然后设置它的overflow为auto或者scroll。一般移动端左右滑动不需要显示滚动条，此时可以设置.element::-webkit-scrollbar {d...
html一行2列页面,DIV+CSS：网页一行两列背景自适应
weixin_39995774的博客
06-04 881
网页布局中常有的一种情况就是网页主体部分分成一行两列；而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；但这样的设计给布局提出了一个看似简单，而实现非常难的问题；那就是左右两列怎么样实现背景高度自适应，及左边内容高于右边时，右边背景色也要和左边一样；右边内容高于左边时，左边背景色也要和右边一样；当年为了实现这个，我在网上查过无数的文章，都没有很好的解决方案；多数...
【HTML】美化滚动条 | 在div中添加右侧滚动条
weixin_45968070的博客
04-21 2516
要只添加右侧滚动条，可以使用CSS中的overflow-x属性来限制水平方向上的溢出，并使用overflow-y: hidden来隐藏垂直方向上的溢出。美化滚动条可以使用CSS中的::-webkit-scrollbar伪元素，该伪元素允许我们自定义滚动条的样式，如颜色、宽度等。/* 直接隐藏滚动条 */
css设置头部左侧固定，右侧内容滚动
qq_53353413的博客
11-08 2271
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex</title.
HTML 一行两列 - div块儿并列显示
SAGGITARXM
09-10 8211
一行两列 - div块儿并列显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<form name="a...
调试css方法不固定,不固定宽度和高度的情况下CSS调整div居中的方法总结
weixin_33971463的博客
08-04 289
很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多...
HTML实现2列布局，左侧宽度固定，右侧自适应
weixin_33973609的博客
12-09 266
HTML实现2列布局，左侧宽度固定，右侧自适应 实现一： <style> body, html{padding:0; margin:0;} // 根据CSS定位，利用浮动或绝对定位，使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-type(1){ float: ...
html设置div大小位置不变,不固定宽度和高度的情况下CSS调整div居中的方法总结...
weixin_36459547的博客
06-04 614
很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多...
DIV+CSS 一行两列的简单代码（左列固定宽度,右列自适应宽度 ）
09-05 1180
<!--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】父div宽度固定，子div横向排列，排不下自动换行
u011279583的博客
12-06 3469
前提： 如图，有n个虚线div，未设定样式时每个div独占一行，且宽度均为100%。 现有一需求，要求每个虚线div宽度为文字宽度，并横向排列，排不下时自动换行。 <style> .area { width: 800px; padding: 45px 30px; margin-bottom: 30px; outline: 6px solid #000; } .area div[class
div+css 横向滚动公告，公告只有一条 自适应公告长度
最新发布
06-02
要实现只有一条并且自适应长度的横向滚动公告，可以使用CSS3的flex布局和animation动画。具体步骤如下： 1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div大时被隐藏。 2. 在div容器内部创建一个p元素，并使用CSS3的flex布局，设置flex-wrap属性为nowrap，使p元素无法换行。 3. 对p元素设置white-space属性为nowrap，使文本不换行。 4. 使用CSS3的animation动画来实现横向滚动的效果，并将animation动画应用到p元素上。 5. 通过CSS3的media query来实现不同屏幕尺寸下的适配。 下面是示例代码： HTML代码: ``` <div class="notice-container"> <p class="notice-text">这是一条公告信息</p> </div> ``` CSS代码: ``` .notice-container { width: 100%; height: 50px; overflow: hidden; } .notice-text { display: flex; white-space: nowrap; animation: notice-scroll 10s linear infinite; } @keyframes notice-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @media screen and (max-width: 768px) { .notice-text { font-size: 12px; } } @media screen and (min-width: 768px) and (max-width: 992px) { .notice-text { font-size: 14px; } } @media screen and (min-width: 992px) { .notice-text { font-size: 16px; } } ``` 通过上述步骤，就可以实现一个只有一条并且自适应长度的横向滚动公告了。可以根据需要调整容器的高度、文本的字体大小、animation动画的滚动速度等参数来适应不同的场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值