内部div自动扩张剩余宽度
<div id="container">
<div id="left">左边</div>
<div id="mid"><input type="text" style="width:100%" value="我是自动扩展的,但不会破坏父容器的宽度。除了左边和右边占用的宽度后,剩下的宽度就是我的了。" /></div>
<div id="right">右边</div>
</div>
#container {
width: 400px;
height: 200px;
display: table
}
#left, #mid, #right {
display: table-cell;
background: #ccc;
outline: 2px dashed blue
}
#mid {
width: 100%;
background: #f0f; } #left,#right {
padding-left:15px;
padding-right:15px;
white-space:nowrap;
}
http://jsfiddle.net/xhCXq/350/
http://stackoverflow.com/questions/5505554/set-edge-divs-to-fill-remaining-width
内部div自动扩张剩余宽度的更多相关文章
- 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题
/*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...
- 外部盒模型大小固定 内部有边框div设置浮动时 缩放窗口内部div溢出的解决办法
原因分析: chorme和firefox浏览器下当缩放窗口大小时,边框的计算宽度变大造成内部div宽度的计算宽度变大,外部div放不下内部div而溢出. 解决办法: 给内部div设置 box-sizi ...
- 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法
一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...
- 纯Css实现Div高度根据自适应宽度(百分比)调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
- DIV+CSS布局时, DIV的高度和宽度特性
这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...
- NPOI导出Excel - 自动适应中文宽度(帮助类下载)
前言 做了好几个Excel.Word导出,用了HTTP流导出伪Excel文件.用过Office组件(这东西在生产环境下相当麻烦,各种权限,**). 最后决定使用NPOI组件来导出,好处很多很多了,这里 ...
- 【浅谈html5 响应式布局之自动适应屏幕宽度】
允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=”viewport” content=”w ...
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- 并列div自动等高
并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- Spark RDD概念学习系列之如何创建RDD
不多说,直接上干货! 创建RDD 方式一:从集合创建RDD (1)makeRDD (2)Parallelize 注意:makeRDD可以指定每个分区perferredLocations参数,而para ...
- MVC的一些常用特性,持续更新中。。。
1. @MvcHtmlString.Create("<option value='1'>火星</option>") //渲染Html
- PHP验证器类Validator
Particle\Validator是一个小巧优雅的实用的PHP验证类库,提供了一个非常简洁的API.它无需依赖其他组件,提供友好的文档,并且有利于扩展. 安装 composer require pa ...
- layer Tips参数使用
layer.tips(content, follow, options) - tips层type:4的深度定制.也是我本人比较喜欢的一个层类型,因为它拥有和msg一样的低调和自觉,而且会智能定位,即灵 ...
- UDP协议总结
我们已经讲解了物理层.连接层和网络层.最开始的连接层协议种类繁多(Ethernet.Wifi.ARP等等).到了网络层,我们只剩下一个IP协议(IPv4和IPv6是替代关系).进入到传输层(trans ...
- mysql中间件研究(tddl atlas cobar sharding-jdbc)
mysql-proxy是官方提供的mysql中间件产品可以实现负载平衡,读写分离,failover等,但其不支持大数据量的分库分表且性能较差.下面介绍几款能代替其的mysql开源中间件产品,Atlas ...
- C++内存分配方式——小结
1 内存分配方式 内存分配方式有如下三种: 从静态存储区域分配.内存在程序编译的时候就分配好了,这些内存在整个程序运行期间都存在,如全局变量.static变量等等. 在堆栈上分配.在函数执行期间,函数 ...
- Pyhton学习——Day24
# #面向对象设计:# def dog(name,gender,type):# def jiao(dog):# print('One Dog[%s],wfwfwf'%dog['name'])# def ...
- JWT加密
JWT是一种加密算法,为了防止请求的信息在传输途中被拦截修改 JWT的引用: install-package jwt JWF由三部分组成:Header,Payload,Signature Payloa ...
- 如何用IE打开Chrome浏览器
实现方式,用IE调用cmd命令打开chrome(注意:IE的ActiveX相关设置要启用) <script type="text/javascript"> functi ...