2 sinodata qjf SINODATA_QJF 于 2016.05.08 17:45 提问

如何实现DIV CSS三列自适应

如何实现DIVCSS三列自适应(三列都不定宽)呢,如:左列占屏幕10%,中间列占屏80%,右列占屏10%,这样刚好三列占满屏幕宽度

4个回答

CSDNXIAON
CSDNXIAON   2016.05.08 17:52

css+div三列宽度自适应
css+div三列宽度自适应
js控制三列高度自适应DIV+CSS页面
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

danielinbiti
danielinbiti   Ds   Rxr 2016.05.08 18:45
 用bootstrap
 或者
 <!DOCTYPE html>
<html>
<body>
<div style='display:table-cell;width:5000px;background-color:red;'>111</div>
<div style='display:table-cell;width:80%;background-color:blue;'>222</div>
<div style='display:table-cell;width:10%;background-color:yellow;'>333</div>
</body>
</html>

第二个尽可能打,超出屏幕后会按照比例等分,浏览器需IE8以上,支持html5
waleilei
waleilei   2016.05.09 20:24


.container{ column-count: 3; -moz-column-count: 3; column-gap: 50px; -moz-column-gap: 50px; column-rule: 5px outset #00F ; -moz-column-rule: 5px outset #00F ; } .container div{ background-color: #0F0; }



one

two

three

showbo
showbo   Ds   Rxr 2016.08.26 09:08

那不是按照你的描述,直接百分比设置宽度就行了,然后float布局


<style>
    .p10{width:10%}
    .p80{width:80%}
    .p10,.p80{float:left}
</style>
<div class="p10">p10</div>
<div class="p80">p80</div>
<div class="p10">p10</div>
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!