如何实现DIV CSS三列自适应

如何实现DIVCSS三列自适应（三列都不定宽）呢，如：左列占屏幕10%，中间列占屏80%，右列占屏10%，这样刚好三列占满屏幕宽度

 用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

.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

那不是按照你的描述，直接百分比设置宽度就行了，然后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>