三栏布局的五种方式

最新推荐文章于 2020-11-27 22:52:27 发布
最新推荐文章于 2020-11-27 22:52:27 发布
阅读量139 收藏
点赞数
分类专栏： 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44442095/article/details/87911792
版权

假如高度已经规定，两边宽度为300px,中间自适应 怎么设计？
第一种：float
第二种：position
第三种：将盒子设成flex 中间设成flex：1
第四种：将盒子设成display：table 三个div设成display：table-cell
第五种：将盒子设成display：grid grid-template-row：（高度） grid-template-columns：左边宽度 auto 右边宽度

旧城爱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
五种经典网页布局设计
lzy15907117519的博客
03-04 8万+
不得不说，网页设计绝对是有套路的！网页布局虽然千变万化，但是如果你仔细观察，会发现有一些布局适用范畴相当广，经久不衰。今天的文章，我们就来聊一下5种经典的网页布局。在开始一个新的网页设计项目的时候，不知道你会不会有那么一瞬间的犹豫：“这个项目要从哪里着手呢？”伴随着这种犹豫的，是“做点前所未有的作品”的冲动。不过，很多时候，这些冲动和犹豫都在需求的磨合、设计的细化中，逐步淡化。相比大家也都发现了，...
常见的几种页面内容布局方式
热门推荐
wang839305939的博客
07-27 6万+
常见的页面布局，左右自适应布局
网页的5种布局方式
qq_38557202的博客
10-26 5939
网页的5种布局 一、静态布局 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
网页布局-12种常见布局
sh0109的博客
05-15 4177
12中常见布局 固定宽度 1行1列2行2列3行1列1行2列-两栏布局2行2列3行3列-三栏 自适应宽度 1行1列2行1列3行1列1行2列 备注：页面的加载顺序是根据页面的结构，灵活控制页面的加载顺序。
浅谈几种常用的布局方式
gj1949的博客
11-28 2万+
目前针对web前端页面的设计主要分为pc端和移动端页面，针对不同的页面我们可能会采取不同的布局格式，在整个布局的选择上，没有一成不变的，也没有任何一种布局能够满足各个方面的需要，在众多的布局方式中，我这边主要针对以下几种布局方式简单的发表一下个人的看法。 第一：固定布局 固定布局 *{ margin: 0; padding: 0; } html,body{ wi
三栏布局实现的几种方式
Dear
11-27 1089
文章目录说明1、利用浮动2、利用绝对定位3、利用 flex 布局圣杯布局方式一：利用浮动和定位实现方式二：利用 flex 实现双飞翼布局完整代码 说明 三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有如下五种方式实现 left 为300px，right 为200px 1、利用浮动 原理：浮动元素脱离文档流 html结构 <div class="wrapper"> <div class="left"></div> <div class
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看...
CSS 三栏等高布局实现方法
09-25
实现三栏等高布局需要使用 XHTML 和 CSS 两种技术。我们可以使用 float 属性来让三个栏目浮动在一起，并且使用 padding-bottom 和 margin-bottom 属性来实现等高布局。最后，我们可以使用 position: relative; 属性...
CSS经典三栏布局方案（6种方法）
09-24
CSS三栏布局是一种常见的网页设计布局方式，它通常要求页面有三个区域：左侧栏、中间栏和右侧栏，其中两侧栏宽度固定，中间栏宽度自适应。这种布局在各种网站和应用程序中都有广泛的应用，因为它能够灵活地展示内容...
css实现三栏布局的几种方法及优缺点
09-22
除了上述两种方法，还有其他实现三栏布局的方式，例如： 3. **Flexbox布局** Flexbox（弹性盒模型）是CSS3引入的一种新的布局模式，可以轻松实现三栏布局。通过设置容器的`display: flex`和子元素的`flex`属性，...
DIV+CSS 三栏布局实例代码
09-25
本文将详细探讨如何使用`DIV+CSS`实现一个三栏布局，其中包含左侧固定宽度的`LEFT`栏，中间自适应宽度的`MAIN`栏，以及右侧固定宽度的`RIGHT`栏。这种布局模式在网站设计中非常常见，可以满足多种需求。 首先，我们...
常见的5种网站页面布局方式及特点分析
港夕科技的博客
12-17 3万+
互联网的世界里，网页是我们接触最多的内容展示平台（载体），各种风格设计及不同类型主题的网站数不胜数，笔者作为一名网页设计师，在关注内容本身的同时，也喜欢研究一下网站页面的设计特点，这不失为一种提升网页设计能力的好方法。今天我们主要聊聊关于网站页面布局的一些话题，网页设计虽然千变万化，如果你是个细心的设计师一定会发现其中的一些端倪，就页面布局而言，常用的布局方式其实也就那么几个，接下来港夕科技就和大...
web网页 页面布局的几种方式
lyyo_cd的博客
06-16 4万+
网页基本布局方式： （1）流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。换句话说，通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。 （2
网站常用的五种布局方案
Jacksoncz的博客
04-26 9977
一、“T”结构布局。 所谓“T”结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为"T"形布局。 这是网页设计中用的最广泛的一种布局方式。这种网页设计布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“食之无味”。 二、“口”型布局。
web大前端布局
GoldenPigGirl的博客
10-21 787
web大前端布局 想必新手学习代码首先都要接触到前端而在前端里面布局也是一件非常重要之一下面我们先来了解一下布局吧 常用的布局 常用的布局一般分为一下几大类： 文档布局（text）： 文档流本质是 nomal flow （普通流、常规流） 元素在文档中的特点 块级元素，和内联元素。 块级元素：是自带有这行效果，在文档中独占一行的效果，块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默...
常见的几种页面布局方式
DavidLog的博客
04-26 2万+
1.固定布局（最基本的布局） 固定布局 *{ margin: 0; padding: 0; } html,body{ width:100% ; height: 100%; } .fixedlayout{ width:800px ; background:gray; padding:10px; margin:100px auto ; overflow: h
几种常见的网页布局形式
fredispig的博客
09-28 4514
关键字： “国”、“匡”、“三”、“川”、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等 国字布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型
css网页布局的5种方式
04-23 1069
网站布局方式 1.固定布局 ①给要设置布局的块元素直接利用元素width、height、margin、padding来设置块元素布局位置。 <div class="par"><span class="par_1">固定布局</span></div> <style> .par{ width:200px; height:200px; b...
原生JS生成九宫格
zw686668的博客
07-30 610
原生JS生成九宫格图片并且实现图片互换 解题思路 涉及知识点，请 熟练利用js做出html样式 对onmousedown,onmousemove,onmouseup等事件熟练组合运用 熟练掌握事件对象domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知识点 了解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知识点 理解克隆节点的原理 &
html浮动三栏布局,用CSS的float创建三栏布局的三种方式
最新发布
05-24
使用CSS的float属性可以创建三栏布局，常见的三种方式如下： ### 1. 左右浮动 + 中间margin ```html 左侧栏 中间栏 右侧栏 ``` ```css .left { float: left; width: 200px; } .middle { margin: 0 220px...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值