2 sinat 28220307 sinat_28220307 于 2016.03.04 17:52 提问

HTML布局 三列中间固定宽度左右自适应

三个div,同样高度,中间的div固定宽度,左右两边的div宽度自适应。这个要怎么做,跪求高手赐教!

3个回答

showbo
showbo   Ds   Rxr 2016.03.04 18:03
已采纳

左右怎么个自适法,各占用剩余宽度的多少?自己写个js来控制,在window.onresize事件中重设2个div的宽度

可是宽度用下面的获取

 var w=document[document.compatMode=='CSS1Compat'?'documentElement':'body'].clientWidth;
qq_19891827
qq_19891827   2016.03.04 17:55

可以用js设置那两个div的宽度,首先获得这三个div的父元素div的宽度、中间固定div的宽度然后设置两边的div宽度为(父div宽度-中间div宽度)/2就可以了

ztj771299799
ztj771299799   2016.03.05 09:10

最近研究盒模型你可以去查查flex,这个在移动端是可以兼容的,web端有些浏览器可能还不兼容,http://www.ibm.com/

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
今天太累了,写不了了,先留着写。  1.css3之前       三种方法:圣杯布局 2 , css3新特性    多栏布局    弹性盒模型布局
三列自适应布局:左右定宽,中间自适应
一个不定宽度的容器被分为左中右三列,左右两列定宽100px,中间列自适应剩余宽度,且三列之间间距为10px。 1.float+margin+fix HTML结构如下 左侧定宽 中间自适应 右侧定宽 CSS如下 .left{ float: left;width: 100px; position: relative; } .cent
html css实现左右两列固定宽度中间自适应效果
实现有很多方法 浮动,固定定位,和css布局,这篇文章通过浮动和display:table-sell 两种方法来实现。1.float和margin css部分:.main{overflow:hidden;min-width:405px;} .left,.right,.center { color: #fff;word-wrap: break-word;min-height:500px;}
css三列布局--两边固定中间自适应和中间固定两边自适应
三列布局    本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰。布局方式一:两边固定中间自适应1.flex布局    思路:将父元素box设为display:flex;可将box设置为弹性盒模型进行布局(如果对flex不了解,可点击打开链接学习)<!DOCTYPE html> <html> ...
前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应。看到这里我希望你能停下来思考几分钟,1分钟~2分钟~3分钟~4分钟~5分钟!好了,那么你想出了几种答案呢?下面提供这道题的五种解决方案:首先要写好整个页面的布局(初始化等) <style> html * { padding: 0; ...
html 三列布局(两列固定宽度,一列自适应)
摘要:最近在做移动端页面布局,偶有心得,记录于此。
css三列布局,中间div固定,两侧div宽度自适应
中间固定,两侧宽度自适应 1-3-1一列固定,中间div固定 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%;
Flex布局实现圣杯布局,左右两列固定、中间列自适应的三列式布局
一、Flex主要解决两个问题:1、元素位置:由6个容器属性和2个项目属性控制6个容器属性 flex-direction flex-wrap flex-flow justify-content align-items align-content2个项目属性 order align-self2、元素尺寸或自适应能力:由4个项目属性控制4个项目属
html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)
参考文章:http://hi.baidu.com/alimyself/item/3aa6763d787cc7697c034b9d 参考文章:http://www.cnblogs.com/webmoon/archive/2013/05/05/3060918.html      div布局:                               上
css3布局-左右两栏固定宽度,中间栏优先加载
直接上代码 自适应宽度,左右两栏固定宽度,中间栏优先加载 .container{ display:-moz-box; display:-webkit-box; } div{ padding:10px; -moz-box-si