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>
相关文章
|
3月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
158 1
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
321 1
|
7月前
|
前端开发
用 CSS Grid 轻松构建复杂布局
用 CSS Grid 轻松构建复杂布局
352 83
|
6月前
|
Web App开发 前端开发 数据可视化
用 CSS Grid 实现高效布局的 3 个实战技巧
用 CSS Grid 实现高效布局的 3 个实战技巧
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
485 99
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计

热门文章

最新文章