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 I
jQuery 两大特点: 链式编程:比如.show()和.html()可以连写成.show().html(). 隐式迭代:隐式对应的是显式.隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再 ...
- IIS配置相关问题:Framework 4.5 在IIS 7.5中运行
<system.webServer> <validation validateIntegratedModeConfiguration="false" /&g ...
- ASP.NET Core EFCore 之DBFirst 自动创建实体类和数据库上下文
通过引用Nuget包添加实体类 运行 Install-Package Microsoft.EntityFrameworkCore.SqlServer 运行 Install-Package Micros ...
- 纯css实现单选框样式
html代码 <h2>你最喜欢的水果</h2> <div class="input-radio"> <!-- 选中状态添加 checked ...
- zip 命令
NAME zip - package and compress (archive) files SYNOPSIS zip [-aABcdDeEfFghjklLmoqrRSTuvVwXy ...
- Linux 磁盘卷扩容
首先识别磁盘,成功之后会显示在/dev下 [root@oracle01 ~]# fdisk /dev/sda ## /dev/sda为通过fdisk -l 查看到的物理磁盘(第一行) Welcome ...
- [转帖]互联网同步yum服务器阿里云 reposync createrepo
https://www.cnblogs.com/withfeel/p/10635529.html 这篇文章 比较齐整 参考文章: https://www.cnblogs.com/lldsn/p/104 ...
- kettle An error occurred, processing will be stopped: 错误 解决方法
上午在使用KETTLE时,报了一个 An error occurred, processing will be stopped: 错误,手动跑没有问题,用jekens调用就报错. 具体原因不清楚,后面 ...
- HTML(上)
目录 HTML(上) 浏览器 HTML 什么是HTML HTML的作用 编写HTML的规范 HTML结构 HTML常用标签 HTML标签速记 HTML(上) 浏览器 浏览器也是一个客户端 #这是一个服 ...
- shell脚本 自启动tomcat,nginx
分为2步走 1. 脚本文件 : /usr/local 2. crontab -e : /5 * * * /bin/sh /usr/local/restart.sh 注意事项:可能用户权限会影响脚本的部 ...