div+css 常用三种自动适应宽度_css div宽度自适应-CSDN博客

本文链接：https://blog.csdn.net/chenxiaoqiang/article/details/43565745

CSS两列布局，右侧固定，左侧自适应宽度

<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">

<div style="width:200px; float:right; background:#090">这是右侧的内容</div>

<div style=" margin-right:210px; background:#F33">这是左侧的内容，自适应宽度</div>

</div>

CSS两列布局，左侧固定，右侧自适应宽度

<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">

<div style="width:150px; float:left; background:#6F0">这是左侧的内容固定宽度</div>

<div style=" margin-left:160px; background:#FC0">中间内容，自适应宽度</div>

</div>

CSS三列布局，左右宽度固定，中间自适应宽度

<div style="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">

<div style="width:200px; float:right; background:#393"> 这是右侧的内容固定宽度</div>

<div style="width:150px; float:left; background:#F60 ">这是左侧的内容固定宽度</div>

<div style=" margin-left:160px;margin-right:210px; background:#6C3;">中间内容，自适应宽度</div>

</div>

overflow:auto; _display:inline-block; 是清除浮动的，_display:inline-block;针对IE6的。

DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过.
下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了.

.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression_r(document.body.clientWidth < 760 ? "760px": "100%" );width:100%;}
div+css <wbr><wbr>常用三种自动适应宽度分栏

.DivMainLeft{float:left;}
div+css <wbr><wbr>常用三种自动适应宽度分栏

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

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