AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2018-08-06 1090
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 不做过多解释：主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。 不多少代码奉上： CSS样式代码： /******************** *公共标签样式 ********************/ /********************* *main 外边框自适应区域 ***********************/ .

不做过多解释：主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。

不多少代码奉上：

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>

最终效果展示：

 

作者：YanBigFeg —— 颜秉锋

出处：http://www.cnblogs.com/yanbigfeg

本文版权归作者和博客园共有，欢迎转载，转载请标明出处。如果您觉得本篇博文对您有所收获，觉得小弟还算用心，请点击右下角的 [推荐]，谢谢！

文章标签：
Web App开发
关键词：
HTML布局
HTML自适应
HTML宽度
HTML布局宽度
HTML固定宽度
yanbigfeg
目录
相关文章
二二*一一
|
29天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
49 1
雨溪-yuxi
|
20天前
|
前端开发 容器
Html布局 BFC的概念和作用讲解
BFC（Block Formatting Context）是Web页面的CSS渲染机制之一，它如同一个独立的容器，确保内部元素的变化不会影响外部布局。本文介绍了BFC的基本概念、作用及实现方法，包括通过设置`float`、`position`、`overflow`属性或使用伪元素等方式使元素成为BFC，有效解决布局中的边距塌陷等问题，优化网页布局效果。
雨溪-yuxi
23 2
LALA
|
28天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中，还可以用table元素来实现双行夹批效果，但比flex布局代码更复杂，效果也不见得更理想。
LALA
39 10
游客44yag4ft7nckq
|
1月前
|
前端开发
HTML 布局1
网页布局对网站外观至关重要。推荐使用 `&lt;div&gt;` 元素进行布局，尽管 `&lt;table&gt;` 也可行但不建议使用。示例代码展示了如何用 `&lt;div&gt;` 创建多列布局，包括头部、菜单、内容和底部区域。
游客44yag4ft7nckq
38 1
游客x4uejvahonufa
|
2月前
|
人工智能
通过AI学习一些HTML的布局方式
学习到了很多
游客x4uejvahonufa
51 3
游客44yag4ft7nckq
|
1月前
|
前端开发 搜索推荐
HTML 布局3
HTML 布局技巧：使用外部 CSS 样式表可提高站点维护效率，只需编辑一个文件即可更改所有页面布局。创建高级布局耗时，使用模板是快速选项，可通过搜索引擎找到许多免费模板。常用布局标签：`&lt;div&gt;` 定义块级区域，`&lt;span&gt;` 组合行内元素。
游客44yag4ft7nckq
31 0
游客44yag4ft7nckq
|
1月前
|
前端开发
HTML 布局2
使用 HTML `&lt;table&gt;` 标签是一种简单的布局方式，适用于创建多列结构。尽管可以使用表格来设计美观的布局，但其初衷是展示表格化数据，而非作为布局工具。以下示例展示了如何使用三行两列的表格布局，第一行和最后一行使用 `colspan` 属性横跨两列。
游客44yag4ft7nckq
31 0
土木林森
|
14天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
27 6
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
42 1
[HTML、CSS]细节与使用经验
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
33 1
[HTML、CSS]知识点