如何实现DIV CSS三列自适应

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

3个回答

 用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>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!