您的位置:首页 > Web前端 > CSS

超级实用的CSS布局方案之多列布局(二)

2018-04-02 09:53 375 查看
 两列定宽+一列自适应

(1)原理、用法原理:这种情况与两列定宽查不多。
用法:先将左、中框设置为float:left、width、margin-right,再设置右框overflow:hidden。
(2)代码实例
<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="center">        <p>center</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>
<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="center">        <p>center</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>
<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="center">        <p>center</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>
<div class="parent">    <div class="left">        <p>left</p>    </div>    <div class="center">        <p>center</p>    </div>    <div class="right">        <p>right</p>        <p>right</p>    </div></div>

欢迎各位想学习前端开发的小伙伴加入蓝轨迹WEB开发交流群 143046757 一同探讨~ 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  WEB HTML CSS 蓝轨迹 交流