关于 两列 三列 布局

最新推荐文章于 2024-10-30 21:47:46 发布
原创 最新推荐文章于 2024-10-30 21:47:46 发布 · 463 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#布局

博客介绍了几种列布局方式，包括两列自适应布局、固定宽度两列布局、自适应三列布局以及特殊三列布局，为前端页面布局提供了不同思路。

1.两列自适应布局
2.固定宽度两列
3.自适应三列
4.特殊三列

前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局）
2401_84092360的博客
04-22 417
一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌。当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2。两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；即使li个数不定，可能4个可能5个，依然不会超出ul，flex-shrink默认为1；在两列的基础上，加第三个div，并设置它的宽度和背景颜色。各li1：1比例缩放，充满ul；
前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局
2401_84435192的博客
05-01 159
其中，li设置成inline-block，并在ul上设置font-size为0，消除li之间的空隙；一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌。当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2。两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；还可以用float，li脱离文档流，让其横放，并清除浮动。
两列布局（三种方法）
weixin_30509393的博客
10-01 178
float <div id="a1">a</div> <div id="b1">b</div> #a1{ float:left; width:40px; height:40px; background: red; } #b1{ height:40px; marg...
两列布局、三列布局
风动之石的专栏
07-21 635
单列定宽单列自适应 方法一：margin和绝对定位 主要内容区域 已经不再只是一行文字了 要放很多很多东西到这个区域中来 .... 不断的重复啊重复着…… 侧边栏 不断的重复啊重复着…… .... 不断的重复啊重复着……
两列三列布局
weixin_45393020的博客
03-30 595
两栏右侧自适应布局(自适应部分是首节点) 这里的两栏自适应布局指的是左边固定，右边自适应，并且自适应部分的标签应写在固定部分标签的前面，一共有2种方法实现这种布局。 flex布局 通过设置flex弹性布局的方式实现两栏右侧布局（设置项目的排列方向从右向左） .container{ display: flex; flex-direction: row-reverse; } .left{ width: 300px; height: 100vh;
html三列布局和两列布局,一文汇总 CSS 两列布局和三列布局的具体使用
weixin_32307987的博客
06-05 576
前言随着大前端的发展，UI 框架层出不穷，让我们前端开发对 CSS 的能力要求变得没那么高或者没那么严苛，起码重要性是比不上 JS 编程的。但是，基础的 CSS 依然需要我们熟练掌握，今天就来总结写下 CSS 布局的方式。两列布局左列定宽，右列自适应float + margin 布局html 代码左列定宽右列自适应css 代码：#left {float: left;width: 200px;hei...
html三列布局和两列布局,CSS 常见两列布局、三列布局
weixin_42465158的博客
06-05 1044
一、两列布局：方法一：采用position：absollute;并设置margin-left的值。#left{position:absolute;width:300px;top:0px;left:0px;background:#F00;}#right{background:#0FC;margin-left:300px;}左边定宽 右边自适应方法二：采用float;并设置overflow:auto;...
flex之两列与三列布局
weixin_43465508的博客
03-29 1442
【代码】flex之两列与三列布局。
css两列布局，三列布局，多行多列布局
2301_79765198的博客
10-30 1635
两列布局的特点是一列宽度固定，另一列宽度自适应。固定宽度的列通常用于放置导航栏、侧边栏等固定内容，而自适应宽度的列则用于显示主要内容，能够根据屏幕大小自动调整宽度，以适应不同设备的显示需求‌。实际应用场景两列布局在网页设计中非常常见，适用于多种场景‌导航栏和主要内容‌：左侧固定宽度的列可以放置导航栏，右侧自适应宽度的列显示主要内容。‌侧边栏和文章内容‌：左侧固定宽度的列作为侧边栏，右侧自适应宽度的列显示文章内容。‌广告栏和主要内容‌。
两列三列布局(附代码&图)
l_ymttt的博客
07-13 2916
两列布局 1：浮动：左边的给宽高，右边的不设宽，用margin-left把左边的宽给留出来 2：相对绝对定位：给父级加position:relative,左边的给宽高并absolute,右边的不设宽，给高度并用margin把left的宽留出来 3：flex：给父级设flex，left给宽高，right设置flex为1，给高 效果图： <!DOCTYPE html> <html lang="en"> <head&g...
常见的两列布局和三列布局
cuteyDan的博客
08-14 2703
（1）两列布局 方法一：采用position：absollute;并设置margin-left的值。 左边定宽 右边自适应 #box{position: relative;} #left{position:absolute;top:0px; left:0px; width:300px;background:#F00;} #right{margin-left
CSS实现页面两列布局与三列布局的方法示例
09-27
本文将详细讲解如何使用CSS实现两列布局和三列布局，以及如何实现宽度和高度的自适应。 首先，我们来看一种基于BFC（块格式化上下文，Block Formatting Context）原理的三列布局方法。BFC是一个独立的渲染区域，它...
前端提高篇（四十四）CSS练习3：flex布局（导航栏，两列三列布局(1)
2401_84435192的博客
05-01 134
其中，li设置成inline-block，并在ul上设置font-size为0，消除li之间的空隙；一般两列布局会在父级设置一个最小宽度min-width，当浏览器的宽度小于这个值时，下方出现滚动条，页面从左到右滚动看全貌。当两个子div不能充满父级时，2子由于设置了flex-grow，而1子的flex-grow为0，所以多余的宽度都给了2。两个子div，第一个子div设定宽度，第二个不设宽度，但设置了felox-grow：1；还可以用float，li脱离文档流，让其横放，并清除浮动。
CSS--两列网页布局，三列布局和多行多列布局
最新发布
2301_82005922的博客
10-30 798
上一期我们已经学会两列布局了，那么三列布局和多行多列布局怎么写呢？
for循环中的i变量问题
蓝色杯子和猫
05-28 5643
for循环中的i变量问题1.如何点击每一列的时候alert 其index?<ul id="test"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul>
web前端开发之几种布局方式之响应式布局
蓝色杯子和猫
05-28 2404
web前端开发之几种布局方式之响应式布局一、理解几种布局的概念1、静态布局（Static Layout）即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置； 对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。2、弹性布局弹性布局是CSS3引入的强大的布局
HTTP缓存
蓝色杯子和猫
05-31 862
最近一直效率不高，希望以后能改正。1. Web缓存的工作原理所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务（假设有副本可用的情况下，未被销毁回收或者未被删除修改）。这些规则有的在协议中有定义（如HTTP协议1.0和1.1），有的则是由缓存的管理员设置（如DBA、浏览器的用户、代理服务器管理员或者应用开发者）2.浏览器端的缓存规则浏览器缓存机制，是一个很大的话题，详见九种浏览
mvvm的基本原理
蓝色杯子和猫
06-05 753
MVC，MVP 和 MVVM 的图示
圣杯布局和双飞翼布局解析
蓝色杯子和猫
05-29 617
圣杯布局和双飞翼布局解决的问题是一样的，就是两边固定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。 不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：见代码后的解析 双飞翼布局还有个好处，让Main变成BFC元素了，屏幕宽度缩
CSS两列与三列布局实战教程：自适应宽度与BFC方法
本文档详细介绍了如何使用CSS实现页面的两列布局与三列布局。首先，我们通过BFC（Block Formatting Context）的概念来构建三列布局。BFC允许我们创建独立于文档流的布局区域，通过浮动元素`<div class="left">`和`...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值