html:

<div class="box1">
<div class="divA">DIVA</div>
<div class="divB">DIVB</div>
</div>

 css:

<style type="text/css">
* {
margin: 0;
padding: 0;
} .box1 {
width: 100%;
height: 300px;
background: #008000;
padding:1px;
box-sizing: border-box;
}
.divA {
width: 150px;
height: 150px;
background: red;
text-align: center;
float: left;
} .divB {
margin-left: 150px;
height: 260px;
background: blue;
text-align: center;
margin-top: 20px;
}
</style>

  

HTML左边盒子固定,右边盒子自适应的更多相关文章

  1. css-两个div并排,左边宽度固定右边自适应的布局 的实现方法

    <div class= "container"> <div class="left"></div> <div clas ...

  2. 实现一个div,左边固定div宽度200px,右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  3. HTML布局之左右结构,左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  4. css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  5. 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

  6. 左边label随着右边textarea高度自适应

    左边label随着右边自适应 近期项目中,有表单需求 默认展示两列,当内容多的时候,可以展示一列 左边列 <div> <label>备注</label> <s ...

  7. css布局:左边固定宽度,右边自适应;右边固定宽度,左边自适应

    左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...

  8. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  9. flex 左边固定宽度,右边自适应

    <div id="flex"> <div id="left">我在边,定宽</div> <div id="r ...

随机推荐

  1. Python爬虫学习==>第十章:使用Requests+正则表达式爬取猫眼电影

    学习目的: 通过一个一个简单的爬虫应用,初窥门径. 正式步骤 Step1:流程框架 抓取单页内容:利用requests请求目标站点,得到单个页面的html代码,返回结果: 正则表达式分析:根据html ...

  2. caoz的梦呓:信息安全常识科普

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/cl4TfOodBGSjUuEU8e0rGA 对方公众号:caoz的梦呓 前天在新加坡IC咖啡做了一场关于信息安全的常识普及 ...

  3. 在依赖的框架中已经有统一异常处理的情况下,如何定制自己的统一异常处理spring boot版本

    spring boot 环境下的统一异常处理大家已经非常熟悉了,不熟悉的化可以参考 <<Spring Boot中Web应用的统一异常处理>>.公司内部的统一异常处理如下: @E ...

  4. KCP - A Fast and Reliable ARQ Protocol

    KCP - A Fast and Reliable ARQ Protocol README in English 简介 KCP是一个快速可靠协议,能以比 TCP浪费10%-20%的带宽的代价,换取平均 ...

  5. 6.maven的安装

    JAVA配置 JAVA_HOME=安装目录 PATH=%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin CLASSPATH=%JAVA_HOME%\lib\dt.jar;%JAV ...

  6. CentOS7安装rabbitMQ,并实现浏览器访问

    第一.安装wget yum install wget 第二.下载erlang和rabbitmq-server的rpm (1)在/usr/local下创建目录rabbitMQ,并进入该目录 (2)下载 ...

  7. 为什么要学习Hive

    一 为什么要学习HIVE?   为什么不是ORACLE和MYSQL?   因为大数据时代 数据量成几何倍数增长,并且数据量非常庞大.大到要用PB EB这种量级去衡量.而我们的ORACLE/MYQL这种 ...

  8. dual Oracle兼容

    CREATE OR REPLACE VIEW dual ASSELECT NULL::"unknown"WHERE 1 = 1;

  9. thinkphp5.1 关于加载静态资源路径问题

    和thinkphp5.0不一样,thinkphp5.1的 thinkphp5.0的 直接在config.php文件中加入代码: <?phpreturn [ 'view_replace_str' ...

  10. sql server 通配符

    sql有四种通配符: -- %可以匹配任意长度的字符: -- _匹配单个字符: -- [charlist]匹配括号中的任何一个字符 -- [^]匹配不在括号中的任意单个字符 示例: --'[ab]'匹 ...