本篇文章给大家带来的内容是关于html布局：html三列布局的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。
CSS样式代码：
/*********************公共标签样式********************//**********************main 外边框自适应区域***********************/.main { width: 100%; min-width: 1100px; padding-bottom: 30px; box-sizing: border-box; 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><html><head> <meta http-equiv="x-ua-compatible" content="IE=9" /> <title>三列布局</title> <!--页面样式--> <link href="~/Content/css/StyleTemplate/Index.css" rel="stylesheet" /> <!--当前页面的逻辑 --></head><body> <!-- 主要区域 --> <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> <!--footer 底部区域 --> <div class="footer"> <div class="submit"> <!-- 提交 按钮 --> <a class="submit-btn" onclick="window.print()"> 流程转交 </a> </div> </div></body></html>最终效果展示：
相关文章推荐：
div标签：水平居中和垂直居中的实现（附代码）
什么是响应式布局？html响应式布局的实现
html布局的常见类型有哪些？html的三种布局特点分析
