HTML左边盒子固定,右边盒子自适应

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左边盒子固定,右边盒子自适应的更多相关文章
- css-两个div并排,左边宽度固定右边自适应的布局 的实现方法
<div class= "container"> <div class="left"></div> <div clas ...
- 实现一个div,左边固定div宽度200px,右边div自适应
实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...
- HTML布局之左右结构,左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:
html: <div class="container"> <div class="left"> left固定宽度200px </ ...
- 左边label随着右边textarea高度自适应
左边label随着右边自适应 近期项目中,有表单需求 默认展示两列,当内容多的时候,可以展示一列 左边列 <div> <label>备注</label> <s ...
- css布局:左边固定宽度,右边自适应;右边固定宽度,左边自适应
左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- flex 左边固定宽度,右边自适应
<div id="flex"> <div id="left">我在边,定宽</div> <div id="r ...
随机推荐
- jQuery事件操作
bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...
- 大觅网03Day
实现轮播图接口 1.在开始工作之前请先准备好以下要用到的软件以及素材: MarkdownPad: POSTMAN: dm-common(install打包操作-保证本地构建), dm-base-pro ...
- HDU 1203 I NEED A OFFER! (动态规划、01背包、概率)
I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- 为什么要学习Hive
一 为什么要学习HIVE? 为什么不是ORACLE和MYSQL? 因为大数据时代 数据量成几何倍数增长,并且数据量非常庞大.大到要用PB EB这种量级去衡量.而我们的ORACLE/MYQL这种 ...
- ubuntu 18.04 配置notebook远程连接的坑
jupyter-notebook的安装不在此说明 在网上搜了很多方案都不行,好不容易从坑里爬出来 以下为远程连接配置方法 1.生成配置文件 jupyter notebook --generate-co ...
- 从入门到自闭之Python三大器--生成器
1.什么是生成器 核心:生成器的本质就是一个迭代器 迭代器是python自带的的 生成器是程序员自己写的一种迭代器 编写方式: 基于函数编写 推导式编写 def func (): print(&quo ...
- python网络爬虫(3)python爬虫遇到的各种问题(python版本、进程等)
import urllib2 源地址 在python3.3里面,用urllib.request代替urllib2 import urllib.request as urllib2 import coo ...
- C# 枚举转集合
记录一下,方便自己下次使用. public class EnumHelper { /// <summary> /// 将枚举转为集合 /// </summary> /// &l ...
- luogu题解 P1707 【刷题比赛】矩阵加速递推
题目链接: https://www.luogu.org/problemnew/show/P1707 分析: 洛谷的一道原创题,对于练习矩阵加速递推非常不错. 首先我们看一下递推式: \(a[k+2]= ...
- 红色警戒2CE修改教程
在大学的时候特别喜欢玩游戏,尤其偏爱单机游戏.在玩一些单机游戏的时候,特意使用了一些修改工具.本来是打算做成一个系列的,但是现在由于时间问题,仅介绍一些.(大概包括rimworld,饥荒,放逐之城,缺 ...