CSS-布局5-Calc三列布局

简介: 1、实现效果  Calc实现三列布局,中间自适应,左右固定宽度。2、实现思路  中间宽度 计算出来 : calc(100% - 左边宽度+右边宽度)3、源代码 Calc三列布局 body{ margin: 0px; } .

1、实现效果

  Calc实现三列布局,中间自适应,左右固定宽度。

2、实现思路

  中间宽度 计算出来 : calc(100% - 左边宽度+右边宽度)

3、源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calc三列布局</title>
    <style type="text/css">
    body{
        margin: 0px;
    }
    .center{
        float: left;
        width: calc(100% - 400px);
        background: #ccc;
        height: 200px;
    }
    .left{
        float: left;
        width: 200px;
        height: 200px;
        background: red;
    }
    .right{
        float: left;
        width: 200px;
        height: 200px;
        background: blue;
    }
    </style>
</head>
<body> 
    <div class="left">left 200px </div>
    <div class="center">center=calc(100%-400px)</div>
    <div class="right">right 200px</div>
</body>
</html>
相关文章
|
2月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
2月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
3月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
79 4
|
3月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
4月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
3月前
|
安全 前端开发 开发者
CSS3 中 calc()、constant() 和 env() 函数的使用指南
在现代网页设计中,CSS3 的 calc()、constant() 和 env() 函数为开发者提供了强大的工具,帮助实现灵活和响应式的布局。本文将深入探讨这三个函数的定义、用法以及最佳实践,特别是如何利用 calc() 进行动态计算、constant() 的历史背景,以及 env() 在处理设备安全区域中的应用。通过本文,读者将能够更好地理解并运用这些函数,提升网页设计的灵活性与用户体验。
122 0
|
5月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
239 3
|
4月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。