`
elive777
  • 浏览: 4570 次
  • 性别: Icon_minigender_1
  • 来自: 福州
最近访客 更多访客>>
社区版块
存档分类
最新评论

2列div宽度自适应

IEFirefoxCSSGoHTML 
阅读更多 
<!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 id="l_table">
  <div class="l_nav">
    <input name="input" type="button" class="l_button" value="新建子类别" onClick="bjDetail()" />
    &nbsp;&nbsp;
    <input name="" type="button" class="l_button" value="合并至" onClick="hbDetail()" /></div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td colspan="3" style="text-align:left">未整理的开放类别：</td>
  </tr>
  <tr class="l_trbg">
    <td width="20%">开放类别名称</td>
    <td width="20%">提交时间</td>
    <td width="20%">操作</td>
    </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
    </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
  </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
  </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
  </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
  </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
  </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
  </tr>
  <tr>
    <td>笔记本</td>
    <td>2009-08-08</td>
    <td><a href="#" onClick="glDetail()">归类至</a></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr class="l_trbg">
    <td class="tr"><a href="#">首页</a> <a href="#">上一页</a> 1 2 3 4 5 <a href="#">下一页</a> <a href="#">尾页</a> 当前1/10页 跳转到 <input name="" type="text" class="l_text" /> <input name="" type="button" class="l_go" value="GO" /></td>
  </tr>
</table>
   </div>
</div>

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

 

分享到：
IE浏览器系列识别代码
评论
发表评论

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

相关推荐

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

    在网页设计中，"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术，它主要应用于响应式设计，使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...

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

    在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...

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

    实现DIV层自适应高度和宽度 在网页设计中，DIV层的自适应高度和宽度是非常重要的，因为它可以使网页适应不同的浏览器大小和分辨率，从而提高用户体验。以下是使用JS+CSS来实现DIV层自适应高度和宽度的知识点： 一...

    数据表格JqGrid自适应列宽度

    2. **列模型配置**：每个列在JqGrid中都有一个对应的列模型（`colModel`），其中可以设置列的宽度。使用`autoResizable: true`属性，可以开启列的自动调整大小功能。 3. **自适应事件处理**：JqGrid提供了`...

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

    因此，如果希望div宽度自适应内容，我们需要改变div的默认行为。 一种常见的方法是将div的`display`属性设置为`inline-block`。这使得div具有内联元素的特性，即宽度会根据内容自动调整，同时保留块级元素的垂直堆...

    css+div自适应窗口宽度

    本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度，确保无论用户浏览器窗口大小如何，页面都能保持良好的显示效果。 首先，我们要理解`min-width`属性。在示例代码中，`.divGlobal`, `.DivTop`, `....

    tab选项卡切换效果，tab选项卡内容宽度自适应

    2. CSS 样式：CSS用于定义选项卡样式，包括选中状态、悬停效果以及宽度自适应。宽度自适应可以通过使用百分比单位或者媒体查询实现。例如： ```css .tab-header { display: flex; } .tab-item { flex: 1; text-...

    宽度自适应三列布局（且最小宽度500px）

    DIV三列布局，宽度自适应（且最小宽度500px）

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

    本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...

    js解决div内图片自适应大小

    如果div宽度小于图片宽度，就按照这个比例调整图片的高度，以保持原始比例。 值得注意的是，此方案适用于图片宽度大于div宽度的情况。如果图片高度大于div高度，可以调整条件判断，或者结合CSS的`object-fit`属性来...

    div容器调整宽度大小自适应特效.zip

    在网页设计中，"div容器调整宽度大小自适应特效"是一项关键的技术，它涉及到前端开发中的响应式设计、布局管理...通过研究和理解这个示例，开发者可以掌握如何实现div宽度自适应的效果，进一步提升网页设计和开发技能。

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

    - **Flexbox**（弹性盒子布局模块）：Flexbox允许我们在一行或一列中灵活地排列元素，无论元素数量如何，都可以轻松实现等宽或自适应宽度的布局。 - **Grid布局**：CSS Grid提供了二维布局系统，可以更精细地控制...

    外部DIV如何强制宽度不被内部DIV撑开

    有时，我们可能遇到这样的需求：希望外部的`&lt;div&gt;`容器保持固定的宽度，而不受内部`&lt;div&gt;`或其他子元素尺寸的影响。这在创建响应式设计、固定宽度的侧边栏或模块时尤为常见。本文将详细探讨如何通过CSS属性实现这一...

    html图片自适应手机屏幕大小的css写法

    `width: 100%`则是让图片宽度自动扩展以填充其父容器的宽度，从而实现自适应。 4. 浮动清除与盒模型 文档中包含清除浮动的代码（#clear），以及使用box-sizing属性定义盒模型的行为： ```css * { -webkit-box-...

    js实现自适应宽度的tab标签导航

    本文将详细讲解如何使用JavaScript实现一个自适应宽度的Tab标签导航。 首先，我们需要理解Tab导航的基本结构。通常，Tab导航由两部分组成：HTML结构和CSS样式。HTML部分用于定义各个Tab标签和内容区域，CSS则用于...

    VS 2012 ReportViewer 自适应大小

    ReportViewer 的自适应大小问题是由于其高度和宽度固定的原因，而 DIV 的高度和宽度可以根据浏览器的尺寸进行调整。因此，我们可以使用 DIV 来包住 ReportViewer 控件，并使用 JavaScript 代码来调整 DIV 的尺寸，...

    div背景全屏自适应

    ### div背景全屏自适应知识点解析 #### 一、知识点概述 在网页设计与开发过程中，经常需要将某个`div`元素的背景设置为全屏显示，并且能够根据不同的屏幕尺寸进行自适应调整。这种技术被称为“div背景全屏自适应”...

    三栏布局--左右宽度固定，中间自适应宽度

    2. **自适应**：`#id3` 的宽度通过设置 `margin-left` 和 `margin-right` 来预留左右两侧的空间，使其能够根据容器的实际宽度自动调整大小。 3. **兼容性**：需要注意的是，绝对定位可能会导致一些浏览器兼容性问题...

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

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

    宽度自适应的网页图片展示-适合企业网站.rar

    宽度自适应的网页图片展示-适合企业网站，自适应网页宽度或者是屏幕分辨率的变化，左右两边始终是填充满屏显示，仔细看会发现，将图片的背景与Div图片滚动区域相一致，就可快速实现这种效果，这种自适应的图片切换...

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