html使用两栏布局自适应

2024-10-19

CSS 实现：两栏布局（一边固定，一边自适应）

☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <div class="main"></div> </body> √[实现]: // html 和 body 的高度默认为0,因此要先设置为100%,并且清除默认样式(margin:0; padding:0) html,body { /*width: 100%;*

好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它写出来,先说今天的吧.两栏布局,左边固定,右边自适应百度了一下,使用了http://www.zhangxinxu.com/wordpress/2010/03/纯css实现侧边栏分栏高度自动相等/ 这个原理制作侧栏,分栏登等高做法使用margin-bottom:赋值,和padding-bottom

CSS 实现左侧固定，右侧自适应两栏布局的方法

"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点. 常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性.另外一种思路是利用CSS中的calc()方法来动态设定宽度.还有一种思路是,利用CSS3中的新型布局flex layout与grid layout. 效果图: HTML布局: <div class="out

七种CSS左侧固定,右侧自适应两栏布局

一两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="wrapper" id="wrapper"> <div class="left"> 左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大. </d

如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用方法以及代码具体实现效果展示如下: 1.二栏布局-flex弹性布局  <div class="title">flex弹性布局:</div> <div class="box1"> <

css布局 - 工作中常见的两栏布局案例及分析

突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕竟站在前辈肩膀上学习,我整理起来更轻松[哈哈].(然后我再说一些我能想到的处理方式,帮助我们在工作中应对不同的布局结构时,选择性的去找最适合自己页面布局的方法) 说在前面:为了更好的看出来两列结构,截图我都做了蓝线和红线的框选.颜色较深的换成了黄线.总之就是为了让你一眼看出来,哪块和哪块.适合布局萌

css两栏布局、圣杯布局、双飞翼布局

最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .left { float: left; width: 100px; height: 100px; background-color: red; } .box1 .right { margin-left: 100px; height: 100px; background-color: green; }

Css三栏布局自适应实现几种方法

Css三栏布局自适应实现几种方法自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏布局自适应: 代码如下复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位法</title> <style> .pa

使用display:table使两栏布局高度相等

两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <st

使用display:flex;实现两栏布局和三栏布局

一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px;} .item{padding:6px;} .item1{flex:0 0 auto;background-color:#999;width:200px;} .item2{flex:1 1 auto;background-color:#484;} <div class="flex-contai

CSS实现两栏布局

写在前面两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layouts),凝胶布局(Jello layouts),绝对布局(absolute layouts),表格布局(table layouts). 所有源码在底部. 流体布局浏览器显示HTML元素,是从HTML文件最上面开始,从上往下沿元素流显示各个元素,像一个流体一样. 页面布局如下: <header>页

CSS 实现：两栏布局（等宽布局）

☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> <div class="col-2"></div> </div> √[实现]: ♪ 两栏等宽布局(三栏等宽同理) ① float 布局 .col-1, .col-2 { width: 50%; // 各占一半,尺寸相同 float: left; // 都脱

css实现两栏布局，左侧固定宽，右侧自适应的7中方法

一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;width:calc(100% - 100p

CSS | 自适应两栏布局方法

html代码: <div class="main"> <div class="left" style="background: #00FF7F; width: 200px; min-height: 200px;">固定宽度</div> <div class="right" style="background: #87CEEB;min-height: 300px;"&

关于两栏布局，三栏布局，一级点击三角触发select的onchange事件问题

首先看这样一个效果:,这个截图来自移动端的列表的一整行,在这个效果当中,存在两个技术点,首先选择祝福卡这个宽度是一定的,右边的部分,宽度随着手机屏幕的宽度而自适应,再一个技术点就是点击最右侧向下箭头,触发选择卡片类型这样一个动作,选卡片类型的控件是select标签,也就是需要触发它的onchange事件. https://segmentfault.com/a/1190000010698609

css的两栏布局

经典的实现左边固定宽度,右边宽度自适应的几种方法利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度) .left{ width: 30px; float: left; background-color: red; } .right{ margin-left: 50px; background-color: blue; } 2.利用position和margin属性 .parent{ position: relative; } .left{

Vue+min-width实现最大两栏布局

css布局 - 两栏自适应布局的几种实现方法汇总

这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录简单粗暴float来实现 absolute"离家出走"定位过去圣杯布局 - margin负边距高贵优雅flex轻松搞定 table表示不服气,凭什么我要被抛弃衍生 - display:table-cell; pc端定死宽?那inline-block携手width也是个好方法 * 以下汇

前端一面/面试常考题1-页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应。

题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然,这道题可以有多种方案,面试官想要通过这个题目考察面试者对CSS的掌握程度,是否善于思考.总结. 比较容易想到的两种方法是: 浮动绝对定位但如果只给出这两个答案,还没到及格线. 2. 进阶 flex table cell 网格布局---grid [下文第二部分,有相应的代码及实现效果演示] 3.

CSS布局——横向两列布局

1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>横向两列布局</title> <style type=&