zoukankan      html  css  js  c++  java
  • 内部div自动扩张剩余宽度(包含固定宽度div和自适应宽度div)

    1、浮动方式:

    (1)右边自适应,左边固定宽度。

    实现点:float:left;width:100%; 顺序(有float的要先渲染);

    实现:1.直接将style写在div里
    <div style="border:1px solid black;clear:both;">
        <div id="right" style="20px;float:right;border:1px solid blue;">右边</div>
        <div id="left" style="100%;border:1px solid red;">左边<div>
    <div>

    注意:float的div是写在前的,如果写在自动填充的div后面,则效果没有。

    (2)两边固定宽度,中间自适应

    <div id="main" style="100%;"> 
      <div id="left" style="float:left;200px;border:1px solid red;height:100px;background-color:red;">左边</div> 
      <div id="right" style="float:right;200px;border:1px solid red;height:100px;;background-color:red;">右边</div> 
      <div id="center" style="height:100px;border:1px solid blue;auto;margin-left:200px;margin-right:200px;background-color:green;">中间</div> 
    </div> 

    2、类表格方式:

    <div style="100%;display:table;"> 
      <div style="200px;border:1px solid red;height:100px;background-color:red;display:table-cell;"></div>
      <div style="height:100px;border:1px solid blue;auto;;background-color:green;display:table-cell;"></div> 
        <div style="200px;border:1px solid red;height:100px;;background-color:red;display:table-cell;"></div> 
    </div> 
  • 相关阅读:
    websocket 初识
    JavaScript 系列博客(四)
    JavaScript 系列博客(三)
    JavaScript 系列博客(二)
    JavaScript 系列博客(一)
    前端(八)之形变
    前端(七)之动画与阴影
    java变量、数据类型
    js简单的获取与输出
    Eclipse字体修改
  • 原文地址:https://www.cnblogs.com/lizhenli/p/4757316.html
Copyright © 2011-2022 走看看