今天看啥
    热点:

      天发国际娱乐官网:  今天,对于这户农家,是一个光荣的日子。

      DIV固定宽度和动态拉伸混合水平排列,div拉伸


      1.效果图

       

       

      2.源代码

      html

      <h2>1.头部固定,尾部拉伸</h2>
      <div class="container" id="div1">
          <div class="head"></div>
          <div class="tail"></div>
      </div>
      
      <h2>2.尾部固定,头部拉伸</h2>
      <div class="container" id="div2">
          <div class="tail"></div>
          <div class="head"></div>
      </div>
      
      <h2>3.头尾固定,中间拉伸</h2>
      <div class="container" id="div3">
          <div class="head"></div>
          <div class="tail"></div>
          <div class="center"></div>
      </div>
      
      <h2>4.中间固定,两头拉伸</h2>
      <div class="container" id="div4">
          <div class="head">
              <div class="inner"></div>
          </div>
          <div class="tail">
              <div class="inner"></div>
          </div>
          <div class="center"></div>
      </div>

      css

      <!-- 样式 -->
      <style type="text/css">
          /* 容器宽度为100% */
          .container{
              width: 100%;
          }
      
          /** 头部div固定宽度 **/
          #div1 .head{
              width: 200px;
              height: 100px;
              background-color: #00F7DE;
              float: left;
          }
      
          /** 尾部div自动填充拉伸 **/
          #div1 .tail{
              width: auto; /** 宽度不写或者auto都行 **/
              height: 100px;
              margin-left: 200px;
              background-color: #FFB800;
          }
      
          /** 尾部div固定宽度 **/
          #div2 .tail{
              width: 200px;
              height: 100px;
              background-color: #FFB800;
              float: right;
          }
      
          /** 头部div自动填充拉伸 **/
          #div2 .head{
              width: auto;
              height: 100px;
              margin-right: 200px;
              background-color: #00F7DE;
          }
      
      
          #div3 .head{
              width: 200px;
              height: 100px;
              background-color: #00F7DE;
              float:left
          }
      
          #div3 .center{
              width:auto;
              height: 100px;
              background-color: #009f95;
              margin-left: 200px;
              margin-right: 200px;
          }
      
          #div3 .tail{
              width:200px;
              height: 100px;
              background-color:#FFB800;
              float: right;
          }
      
          #div4{
              position: relative;
          }
      
          #div4 .head{
              width: 50%;
              height: 100px;
              float: left;
          }
      
          #div4 .head .inner{
              height: 100px;
              background-color: #00F7DE;
              margin-right: 100px;
          }
      
          #div4 .tail{
              width: 50%;
              height: 100px;
              float: left;
          }
      
          #div4 .tail .inner{
              height: 100px;
              background-color:#FFB800;
              margin-left: 100px;
          }
      
          #div4 .center{
              position: absolute;
              width: 200px;
              height: 100px;
              left: 50%;
              margin-left: -100px;
              background-color: #009f95;
          }
      </style>

       

      www.1click-soft.comtruehttp://www.1click-soft.com/Javascript/1284234.htmlTechArticleDIV固定宽度和动态拉伸混合水平排列,div拉伸 1.效果图 2.源代码 html h2 1.头部固定,尾部拉伸 / h2 div class ="container" id ="div1" div class ="head"...

      相关文章

      相关搜索: div

      帮客评论

      视觉看点
      百度 360 搜狗