温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS双飞翼布局

发布时间:2020-07-27 16:10:16 来源:网络 阅读:651 作者:anyw3c 栏目:web开发

--
此CSS是为了实现三列布局:左右固定,中间自适应;且浏览器会自上而下先出现中间部分。

html:

<body> <!-- 使得浏览器先出来center --> <div class="box"> <div class="center"> <!-- 创建一个div 开造 --> <div class="inner"></div> </div> <div class="left"></div> <div class="right"></div> </div>

</body>


CSS:

<style> .box { width: 100%; height: 300px; background: darkblue; margin: 0 auto; } .center { width: 100%; height: 100%; float: left; } .inner { /* width: 100px; height: 100%; background: darkmagenta; */ margin: 0; } .left { width: 100px; height: 100%; background: darkgoldenrod; float: left; margin-left: -100%; } .right { width: 100px; height: 100%; background: darkred; float: left; margin-left: -100px; } </style>

最后效果出来是这样的
CSS双飞翼布局

据说认真阅读并点赞的你,代码敲的最6哦~ 有兴趣的小伙伴可以加我微信,一起讨论;V-x: dandanshen987

##有一天,当你明白"小白" +"勤奋"的时候,你就会成为大牛##

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI