DIV+CSS 一行两列的简单代码（左列固定宽度,右列自适应宽度）

最新推荐文章于 2023-08-11 16:20:44 发布

原创最新推荐文章于 2023-08-11 16:20:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #css #class #firefox #generator #border

本文介绍了一种使用DIV+CSS实现的灵活布局方案，该方案能够确保左侧栏拥有固定的宽度，而右侧栏则具备自适应宽度的功能。同时，为保证在不同屏幕尺寸下的布局一致性，文章还设置了最小宽度限制，并在窗口尺寸小于设定值时显示滚动条。

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

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

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

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