首页 > 其他分享 >万象更新 Html5 - css: float 布局: 通过 float 布局实现 3 栏式布局

万象更新 Html5 - css: float 布局: 通过 float 布局实现 3 栏式布局

时间:2024-09-24 10:24:03浏览次数:9  
标签:float 布局 万象更新 200px right main margin left

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - css: float 布局: 通过 float 布局实现 3 栏式布局

示例如下:

css\src\layout\float\demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过 float 布局实现 3 栏式布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 600px;
        }

        /* 3 栏都是 float:left 布局 */
        .main, .left, .right {
            float: left;
            height: 100%;
            color: white;
        }
        /* main 宽度 100% */
        .main {
            background: red;
            width: 100%;
        }
        /*
            left 宽度 150px
            从 html 看,main 是第 1 个绘制的,其占 100% 了,left 是第 2 个绘制的,正常其会显示在 main 的下一行
            指定了 left 的 margin-left:-100% 的意思就是 left 向左移动整个屏幕的宽度,也就是说 left 会与 main 同行,且居左显示
            由于 left 在 main 之后绘制,所以 left 会遮盖 main
        */
        .left {
            background: green;
            width: 150px;
            margin-left: -100%;
        }
        /*
            right 宽度 200px
            上面说了 main 和 left 都在第 1 行,而 mian 占 100% 了,那么第 3 个绘制的 right 正常来说会显示在 main 的下一行
            指定了 right 的 margin-left:-200px 的意思就是 right 向左移动 200px 的宽度,而 right 本身的宽度也是 200px,也就是说 right 会与 main 同行,且居右显示
            由于 right 在 main 之后绘制,所以 right 会遮盖 main
         */
        .right {
            background: blue;
            width: 200px;
            margin-left: -200px;
        }
        /*
            这个是 main 内部的 div
            上面说了 left 和 right 会覆盖 main
            所以这里 margin-left:150px; margin-right:200px; 是为了躲开 main 的被 left 和 right 覆盖的部分
         */
        .main-inner {
            margin-left: 150px;
            margin-right: 200px;
            height: 100%;
        }
    </style>
</head>
<body>

<section class="container">
    <div class="main">
        <div class="main-inner">
            main
        </div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</section>

</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

标签:float,布局,万象更新,200px,right,main,margin,left
From: https://www.cnblogs.com/webabcd/p/18428554/html5_css_src_layout_float_demo2

相关文章

  • 万象更新 Html5 - css: flex 布局: flex-direction, flex-wrap, flex-flow
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-css:flex布局:flex-direction,flex-wrap,flex-flow示例如下:css\src\layout\flex\demo1.html<!--flex布局(flex-flexibility可伸缩性)1、在容器上指定displayflex-容器......
  • 大有可为!泰科协作机器人全面布局医疗健康行业
    资料显示,截止到2021年5月,中国60岁以上人口已经占据总人口的18%,大大超出国际老龄化的标准10%。同时,近年来出生率进一步下探,中国的老龄化趋势愈发加速。由此,带来了很多的问题,如养老护理,看病就医,医疗康复、健康监测等等方面需求,有着爆发式的增长,而协作机器人,凭借优秀的安全性、可......
  • [CSS] flexbox 布局中,让其元素均匀排列且如何均匀元素之间的 column-gao 和 row-gap
    要达到上图效果,可以通过margin,但是每一行首元素和尾元素都要单独处理,通过nth-child选择器设置。也可以让每一个元素宽度都是父元素宽度的25%,然后子元素宽度再一点点调试向下减一点点,比如22%合适,并且需要设置justify-content:space-between或者其他,但如果最后一行元素不......
  • 第3章 表格布局与表单交互
    3.1表格概述在HTML中,表格是用来展示数据的一种有效方式,特别是当数据是结构化的,比如行和列的形式时。表格由 <table> 标签定义,并通过一系列的行 <tr>、单元格 <td>(tabledata)以及表头 <th>(tableheader)来构建。3.1.1表格的结构一个基本的 HTML表格由以下几个部分......
  • 前端表单布局丨简洁大气的登录表单二(源码)
    效果展示:HTML: <body><divclass="container"><divclass="heading">SignIn</div><formaction=""class="form"><inputrequired=""class="input"t......
  • QT QML模块的布局管理
    QTQML模块的布局管理使用AI技术辅助生成QT界面美化视频课程QT性能优化视频课程QT原理与源码分析视频课程QTQMLC++扩展开发视频课程免费QT视频课程您可以看免费1000+个QT技术视频免费QT视频课程QT统计图和QT数据可视化视频免费看免费QT视频课程QT性能优化视频免费看......
  • 使用 React Router v6 进行布局
    第1步:设置reactrouterv6npmi-dreact-router-dom@latest登录后复制第2步:定义路由结构接下来,在app.js文件中定义路由的结构。我们将为主页、关于页面和联系页面创建路由,并将它们与相应的组件关联起来。//app.jsimportreactfrom'react';import{browserroutera......
  • 九宫格(html css实现)---初识flex布局
    记录flex属性并实现一个九宫格flex属性Flex容器:需要注意的是:当时设置flex布局之后,子元素的float、clear、vertical-align的属性将会失效.container{display:flex;}//块状元素.container{inline-flex;}//行内元素块状元素1.***独占一行:块元素会自动......
  • React 设计模式~布局组件~
    屏幕分割器这种模式经常用于由侧边栏、主栏等组成的常见布局。?app.jsimport{splitscreen}from"./components/split-screen";constleftside=({title})=>{return<h2style="{{"backgroundcolor:>{title}</h2>;};constrightside=({title})=>{......
  • 布局2024,建议女生可以大胆冲一冲高薪职业
    在这个选择大于努力的时代❗如何与时代同频,紧紧抓住每一次时代红利......