【Effective Web】常见的css布局方式--三栏布局

常见的css居中方式–三栏布局

第一种实现:table布局(不推荐)

缺点:在table加载前,整个table都是空白的,且修改布局排版都十分困难

    <table class="container"><td class="left"></td><td class="middle"></td><td class="right"></td></table>
<style>.container {width: 500px;height: 100px;.left {width: 100px;height: 100px;background-color: red;}.middle {height: 100px;background-color: green;}.right {width: 100px;height: 100px;background-color: blue;}}
</style>

在这里插入图片描述

第二种实现:float

优点:实现简单,支持性好
缺点:由于float使得其他非float的元素围绕元素排列,要计算相应的margin

如果按正常排列,效果会是这样,middle块会尽可能占空间,导致right元素被挤压到下一行
在这里插入图片描述

需要把right块提前,同时把middle块加上margin: 0 110px (左右100px + 10px)

    <div class="container"><div class="left" style="float: left">left</div><div class="right" style="float: right">right</div><div class="middle" style="margin: 0 110px">middle</div></div>

在这里插入图片描述

第三种实现:table-cell

由于table有自适应的特点,可以把需要自适应的middle的display设置为table-cell。如果要根据窗口自适应,加上一个很大的width,这里设置为2000px

    <div class="container"><div class="left" style="float: left">left</div><div class="right" style="float: right">right</div><div class="middle" style="display: table-cell; width: 2000px;">middle</div></div>

第四种实现:flex(推荐)

    <div class="container" style="display: flex"><div class="left">left</div><div class="middle" style="flex-grow: 1">middle</div><div class="right">right</div></div>

第五种实现:grid

与flex布局类似,不过可以做二维的布局

    <div class="container" style="display: grid; grid-template-columns: 100px auto 100px"><div class="left">left</div><div class="middle">middle</div><div class="right">right</div></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/355446.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 软链接

# 语法 ln -s <文件夹or文件的真实路径> <自定义路径别名> # 例子 ln -s /etc/sysconfig/network-scripts/ifcfg-ens33 ~/ens33

Flutter 实现软鼠标

文章目录 前言一、如何实现&#xff1f;1、记录鼠标偏移2、MouseRegion获取偏移3、Transform移动图标 二、完整代码三、使用示例总结 前言 flutter在嵌入式系统中运行时&#xff0c;有可能遇到drm鼠标无法使用的情况&#xff0c;但鼠标事件却可以正常接收&#xff0c;此时如果…

基于SSM+Jsp的水果销售管理网站

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

关于椭圆的方程(有Python画的动图)

关于椭圆的方程&#xff08;有Python画的动图&#xff09; flyfish 几何定义 椭圆是平面上所有到两个固定点&#xff08;焦点&#xff09;的距离之和为常数的点的集合。这两个固定点叫做焦点。 解析几何描述 设椭圆的两个焦点为 F 1 F_1 F1​ 和 F 2 F_2 F2​&#xff…

【论文笔记】The Power of Scale for Parameter-Effificient Prompt Tuning

题目: The Power of Scale for Parameter-Effificient Prompt Tuning 来源: EMNLP 2021 模型名称: Soft-Prompt 论文链接: https://aclanthology.org/2021.emnlp-main.243/ 项目链接: https://github.com/google-research/prompt-tuning 核心&#xff1a;针对不同的任务设计不同…

【笔记】打卡01 | 初学入门

初学入门:01-02 01 基本介绍02 快速入门库处理数据集网络构建模型训练保存模型加载模型打卡-时间 01 基本介绍 MindSpore Data&#xff08;数据处理层&#xff09; ModelZoo&#xff08;模型库&#xff09; MindSpore Science&#xff08;科学计算&#xff09;&#xff0c;包含…

视频融合共享平台LntonCVS视频监控安防系统运用多视频协议建设智慧园区方案

智慧园区&#xff0c;作为现代化城市发展的重要组成部分&#xff0c;不仅推动了产业的升级转型&#xff0c;也成为了智慧城市建设的核心力量。随着产业园区之间的竞争日益激烈&#xff0c;如何打造一个功能完善、智能化程度高的智慧园区&#xff0c;已经成为了业界广泛关注的焦…

MacOS设备远程登录配置结合内网穿透实现异地ssh远程连接

文章目录 前言1. MacOS打开远程登录2. 局域网内测试ssh远程3. 公网ssh远程连接MacOS3.1 MacOS安装配置cpolar3.2 获取ssh隧道公网地址3.3 测试公网ssh远程连接MacOS 4. 配置公网固定TCP地址4.1 保留一个固定TCP端口地址4.2 配置固定TCP端口地址 5. 使用固定TCP端口地址ssh远程 …

在 Visual Studio 2022 (Visual C++ 17) 中使用 Visual Leak Detector

在 Visual C 2022 中使用 Visual Leak Detector 1 问题描述1.1 内存泄漏的困扰和解决之道1.2 内存泄漏检测工具的选择1.3 VLD的现状 2 安装和设置VLD的环境变量2.1 安装VLD文件2.2 VLD安装后的目录和文件说明2.2.1 include子目录说明2.2.2 lib子目录说明2.2.2.1 目录整理 2.2.3…

感恩的力量!美洲杯魔幻提前预告 阿根廷 ——早读(逆天打工人爬取热门微信文章解读)

梅西还能不能提&#xff1f; 引言Python 代码第一篇 洞见 感恩的力量&#xff08;深度好文&#xff09;第二篇 视频新闻结尾 引言 早上早起 昨天晚上1点多才睡 这几天都是 明明很早就准备上床睡觉 但是就是忍不住 吃根雪糕 喝个小饮料 看看最近的欧洲杯比赛 卒 真的是拖延症十…

【总结】ui自动化selenium知识点总结

1. 大致原理 首页安装第三方库selenium库&#xff0c; 其次要下载好浏览器驱动文件&#xff0c;比如谷歌的 chromedriver.exe&#xff0c;配置上环境变量。 使用selenium的webdriver类去创建一个浏览器驱动对象赋值叫driver&#xff0c;一个浏览器驱动对象就可以 实现 对浏…

python爬虫之selenium自动化操作

python爬虫之selenium自动化操作 需求&#xff1a;操作淘宝去掉弹窗广告搜索物品后进入百度回退又前进 selenium模块的基本使用 问题&#xff1a;selenium模块和爬虫之间具有怎样的关联? 1、便捷的获取网站中动态加载的数据 2、便捷实现模拟登录 什么是selenium模块&#x…

【python】PyQt5初体验,窗口等组件开发技巧,面向对象方式开发流程实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

文件扫描工具哪个好?便捷的文件扫描工具推荐

对于初入职场的大学毕业生&#xff0c;申请就业补贴是一项不可忽视的福利。 它不仅能够为新生活带来经济上的缓解&#xff0c;也有助于职业生涯的顺利起步。面对申请过程中需提交的文件&#xff0c;如纸质劳动合同&#xff0c;不必烦恼。市面上众多文件扫描软件能助你一臂之力…

轮式机器人Swiss-Mile城市机动性大提升:强化学习引领未来城市物流

喜好儿小斥候消息&#xff0c;苏黎世联邦理工学院的研究团队成功开发了一款革命性的机器人控制系统&#xff0c;该系统采用强化学习技术&#xff0c;使轮式四足机器人在城市环境中的机动性和速度得到了显著提升。 喜好儿网 这款专为轮腿四足动物设计的控制系统&#xff0c;能…

一种基于图卷积创新的电场强度监测模型,原创未发表!!!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类算法的家人&#xff0c;可关注我的VX公众号&#xff1a;python算法小当家&#xff0c;不定期会有很多免费代码分享~ 一种基于图卷积创新的电场强度监测模型&#xff0c;原创未发表…

环境配置02:CUDA安装

1. CUDA安装 Nvidia官网下载对应版本CUDA Toolkit CUDA Toolkit 12.1 Downloads | NVIDIA Developer CUDA Toolkit 12.5 Downloads | NVIDIA Developer 安装配置步骤参考&#xff1a;配置显卡cuda与配置pytorch - 知乎 (zhihu.com) 2. 根据CUDA版本&#xff0c;安装cudnn …

内容安全复习 2 - 网络信息内容的获取与表示

文章目录 信息内容的获取网络信息内容的类型网络媒体信息获取方法 信息内容的表示视觉信息视觉特征表达文本特征表达音频特征表达 信息内容的获取 网络信息内容的类型 网络媒体信息 传统意义上的互联网网站公开发布信息&#xff0c;网络用户通常可以基于网络浏览器获得。网络…

mysql8.0找不到my.ini

报错问题解释&#xff1a; MySQL 8.0 在Windows系统中通常不需要 my.ini 文件&#xff0c;因为安装程序会在 %PROGRAMDATA%\MySQL\MySQL Server 8.0\ &#xff08;通常是 C:\ProgramData\MySQL\MySQL Server 8.0\&#xff09;创建默认的配置文件。如果你的系统中找不到 my.ini…

ArcGIS查找相同图斑、删除重复图斑

​ 点击下方全系列课程学习 点击学习—>ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放 点击学习——>遥感影像综合处理4大遥感软件ArcGISENVIErdaseCognition 这次是上次 今天分享一下&#xff0c;很重要却被大家忽略的两个工具 这两个工具不仅可以找出属性…