2列div宽度自适应

最新推荐文章于 2024-07-03 09:36:39 发布

wcwc777

最新推荐文章于 2024-07-03 09:36:39 发布

阅读量109

点赞数

分类专栏： Html+CSS 文章标签： IE Firefox CSS Go HTML

本文链接：https://blog.csdn.net/wcwc777/article/details/83951796

版权

Html+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

wcwc777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2列div宽度自适应

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;META NAME="Generator" CONTENT="EditPlus&qu
复制链接

扫一扫

专栏目录