html 三列布局（两列自适应，一列固定宽度）

相关文章推荐

满身肌肉的高山 · 捕捉HTML内容(WebView)_core ...· 1 周前 ·

火星上的海豚 · js ...· 1 周前 ·

奋斗的针织衫 · 如何使用python将HTML标记转换为字符 ...· 1 周前 ·

跑龙套的毛豆 · 将HTML特殊转义为实体字符的两种实现方式 ...· 1 周前 ·

憨厚的长颈鹿 · js实现HTML转义和反转义场景：当用户在i ...· 1 周前 ·

发呆的生姜 · “五一”假期临近，自驾游热度飙升！租车平台预 ...· 1 月前 ·

捣蛋的土豆 · Chinese ...· 2 月前 ·

腼腆的茶叶 · 关于辽宁省沈抚改革创新示范区首批省“兴辽英才 ...· 2 月前 ·

重感情的豌豆 · 在潭柘寺摸鱼的年轻人· 6 月前 ·

风流的冰淇淋 · 4名热血青年的8年青春，铸就中国译制动画的“ ...· 6 月前 ·

background-color: #FFF ; border-radius : 6px ; box-shadow : 0px 4px 6px 0px rgba(70, 95, 106,.25) ; /* title 标题 */ .main-title { height : 36px ; line-height : 36px ; text-align : center ; font-size : 1em ; font-weight : bold ; color : #263135 ; background-color : #d1d6da ; border-top-left-radius : 6px ; border-top-right-radius : 6px ; /* ******************** *头部文号区：70px ********************** */ .content_title { width : 100% ; margin : 0 auto ; text-align : center ; height : 30px ; padding-top : 20px ; padding-bottom : 20px ; line-height : 30px ; /* ********************* *区域块设置 ********************* */ .area { height : 500px ; .area_left { float : left ; width : calc(50% - 75px) ; height : 100% ; background-color : bisque ; .area_center { float : left ; width : 150px ; height : 100% ; background-color : black ; .area_right { float : left ; width : calc(50% - 75px) ; height : 100% ; background-color : bisque ; /* ************************* *footer底部区域 ************************** */ .footer { margin : 40px 0 ; /* 提交 */ .submit { height : 40px ; /* 提交按钮 */ .submit-btn { height : 40px ; width : 200px ; display : block ; margin : 0 auto ; border-radius : 5px ; color : #fff ; text-decoration : none ; text-align : center ; line-height : 40px ; font-size : 1.1em ; background-color : #1bbc9b ; cursor : pointer ; /* ******************* *公共标签默认属性设置 ******************* */ body { margin : 0 ; font-size : 15px ; padding : 20px 20px 0 20px ; margin-bottom : 0 !important ; background-color : #f0f0f0 ; input { border : none ;

html代码布局：

Layout = null; <! DOCTYPE html > < meta http-equiv ="x-ua-compatible" content ="IE=9" /> < title > 三列布局 </ title >  < link href ="~/Content/css/StyleTemplate/Index.css" rel ="stylesheet" />  </ head >  < div class ="main" >  < div class ="main-title" > </ div > < div class ="content" > < div class ="content_title" > < div class ="flLeft padigLeft_15" > < span class ="fontBold" > 名称/文号： </ span > < input class ="int" value ="发文文号001" /> </ div > </ div > < div class ="area" > < div class ="area_left" > 左边 </ div > < div class ="area_center" > 中间 </ div > < div class ="area_right" > 右边 </ div > </ div > </ div > </ div >  < div class ="footer" > < div class ="submit" >  < a class ="submit-btn" onclick ="window.print()" > </ div > </ div > </ body > </ html >

最终效果展示：

推荐文章

满身肌肉的高山 · 捕捉HTML内容(WebView)_corewebview2.capturepreviewasync-CSDN博客

1 周前

火星上的海豚 · js 将html字符串转换成node节点三种方式_js html转node-CSDN博客

1 周前

奋斗的针织衫 · 如何使用python将HTML标记转换为字符串-腾讯云开发者社区-腾讯云

1 周前

跑龙套的毛豆 · 将HTML特殊转义为实体字符的两种实现方式 - snandy - 博客园

1 周前

憨厚的长颈鹿 · js实现HTML转义和反转义场景：当用户在input输入框输入HTML标签时，为了防止XSS攻击，需要进行转义。显示时则 - 掘金

1 周前

发呆的生姜 · “五一”假期临近，自驾游热度飙升！租车平台预订量同比增6倍_北京日报网

1 月前

捣蛋的土豆 · Chinese multidisciplinary recommendations on the chronic diseases management throughout the entire c

2 月前

腼腆的茶叶 · 关于辽宁省沈抚改革创新示范区首批省“兴辽英才计划”入选者配套项目 2024年支持名单的公示-辽宁省沈抚改革创新示范区

2 月前

重感情的豌豆 · 在潭柘寺摸鱼的年轻人

6 月前

风流的冰淇淋 · 4名热血青年的8年青春，铸就中国译制动画的“时间胶囊”-虎嗅网

6 月前