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> 
  • 相关阅读:
    mysql_单表查询
    mysql_建表
    MySQL基础
    JS_左边栏菜单
    Vue框架之组件系统
    Vue常用语法及命令
    Django的缓存,序列化,ORM操作的性能
    Django中的form表单
    Django中的auth模块
    AJAX请求提交数据
  • 原文地址:https://www.cnblogs.com/lizhenli/p/4757316.html
Copyright © 2011-2022 走看看