SINODATA_QJF
2016-05-08 09:45
采纳率: 0%
浏览 1.3k

如何实现DIV CSS三列自适应

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

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • danielinbiti 2016-05-08 10: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 2016-05-09 12: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

    评论
    解决 无用
    打赏 举报
  • 那不是按照你的描述,直接百分比设置宽度就行了,然后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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题