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. Leetcode之广度优先搜索(BFS)专题-1162. 地图分析(As Far from Land as Possible)

    Leetcode之广度优先搜索(BFS)专题-1162. 地图分析(As Far from Land as Possible) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. ...

  2. 【Python开发】Python PIL ImageDraw 和ImageFont模块学习

    ImageDraw 新建一个空白图片为本文作示例,新建空白文件的方法 见Image模块,Image.new: mport Image   blank = Image.new("RGB&quo ...

  3. 介绍 5 个实用的 Ajax 库

    参考链接:https://cuiqingcai.com/6806.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.co ...

  4. VMware重装:网络适配器驱动安装失败解决办法

    参考链接:https://blog.csdn.net/theConqueror/article/details/80449125

  5. Nginx网络负载均衡,负载均衡,网络负载,网络均衡

    本节就聊聊采用Nginx负载均衡之后碰到的问题: Session问题 文件上传下载 通常解决服务器负载问题,都会通过多服务器分载来解决.常见的解决方案有: 网站入口通过分站链接负载(天空软件站,华军软 ...

  6. [Python3] 036 函数式编程 返回函数

    目录 函数式编程 之 返回函数 1. 引子 2. 闭包 closure 函数式编程 之 返回函数 函数可以返回具体的值 也可以返回一个函数作为结果 1. 引子 1.1 定义一个普通函数 >> ...

  7. 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件

    [案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...

  8. spring依赖注入三种方式

    一.构造器注入 构造器注入是在程序中实现构造器,可以注入任意类型,如自定义类,集合,String等,注:构造器所有有final修饰的变量都必须在构造方法中注入. 二.设值注入(setter方式注入) ...

  9. jquery的offset().top与javascript的offsetTop区别?

    offset().top是jquery的方法,需引入jquery,它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法,它获取你绑定元素上边框相对于离自己最近且pos ...

  10. java.util.MissingFormatArgumentException: Format specifier '%s'

    java.util.MissingFormatArgumentException: Format specifier '%s' at java.util.Formatter.format(Format ...