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:;
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>
最终效果展示:
html 三列布局(两列自适应,一列固定宽度)的更多相关文章
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- css布局 - 两栏自适应布局的几种实现方法汇总
这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...
- 一个DIV三列布局100%高度自适应的好例子(国外)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...
- 用margin实现两列布局中的自适应列
<div id="wrapper"> <div id="col1"> "fixed" </div> &l ...
- css布局: 两栏 自适应高度
只使用css实现 有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 ...
- DIV+CSS 网页布局之:三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- DIV+CSS 网页布局之:两列布局
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...
- ccs之经典布局(二)(两栏,三栏布局)
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...
随机推荐
- jdk环境变量的设置
一.jdk下载网址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二.环境变 ...
- 使用PowerShell快速部署Win12R2虚拟化桌面
PowerShell一直是微软windows_Server产品中重要的一部分,可以通过PowerShell来完成所有的服务器配置,甚至一些在图形界面下无法完成的事情.随着每一个新版本的微软产品或者服务 ...
- 关于 this 关键字的使用
package com.jsti.guiyang_01; /* 自定义Phone类 this关键字 代表当前正在调用这个方法(访问成员变量)的对象(实例) 1.在setxxx方法中用来区分成员变量和局 ...
- mysql case when then else end 的写法
select t.colum1,t.colum2 (case when t.colum1 = '' then '' t.when colum2 = '' then '' else '' end ) a ...
- 关于css如何让图片文字居中的方法
在将父级转换为单元格形式时,设置的相关属性 可以达到如下效果:
- 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性
凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...
- Python学习笔记【第十三篇】:Python网络编程一Socket基础
什么是⽹络 网络能把双方或多方连在一起的工具,即把数据从一方传递到另一方进行数据传递. 网络编程就是不同电脑上的软件能够进行数据传递.即进程间的通讯. 什么是TCP/IP协议 协议就是大家一起遵守的约 ...
- SpringBoot+logback实现日志打印
logback介绍 logback是一款开源的日志框架,内核重写了,是基于log4j基础进行改良的.其官网为logback.qos.ch.logback在性能上有很大提升,拥有更多特性. logbac ...
- IndexedDB 简单封装
IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂. 当然浏览器数据存储 还有Lo ...
- FileSync文件同步更新工具
FileSync是一款文件同步更新工具,它提供了对一个或多个应用的文件进行管理和同步更并功能,基于MD5的文件对比方式可以使管理者轻易地发布需要更新应用文件.FileSync主要模块包括:服务端,CL ...