css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧
当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div
- 1.只告诉你宽度; 2.只告诉你高度; 3.宽度和高度告诉你;(我总结了可能的3种方式)
- HTML:
<div class="container">
<div class="left">左侧固定宽度200px</div>
<div class="right">右侧自适应</div>
</div>
- No1:方法一
.container{width: 100%; }
.left{color:red; background: gray; float: left; height: 100px}//左侧的div
.right{color:red; background: blue; margin-left: -200px;}//右侧的div
No2:方法二
.container{width: 100%;}
.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%; background:#ccc; position:absolute; left:}
No3:方法三
.container{width:100%}
.left { background-color: green; float: left; width: 200px; margin-right: -100%; }
.right { float: left; width: 100%;margin-left: 200px; background-color:blue; }
No4:方法四
.container{width:100%}
.left{position: absolute; top:; left:; width:200px; background: #ff0;}
.right{ margin-left: 200px; background: #f0f;}
No5:方法5
.container{width:100%}
.left{ position: absolute; top:0 ; left:0 ;width:200px; background:blue;}
.right{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:;background:red ;}
其实还有很多方法可以实现(其它的我就懒得写了),所谓条条大路通罗马,咳咳,不喜勿喷
css中左侧固定,右侧自适应的更多相关文章
- css布局中左侧固定右侧自适应
float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- html布局,左侧固定右侧自适应
前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...
- css布局之左侧固定右侧自适应布局
参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...
- CSS左侧固定右侧自适应
方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...
- 一个简单的左侧固定右侧自适应demo
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- css实现左侧固定宽,右侧自适应的7中方法
一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
随机推荐
- IOS 视频缩略图的生成
使用AVFoundation框架可以生成视频缩略图,用到的类: >>AVAsset: 用于获取多媒体的相关信息,如多媒体的画面和声音等. >>AVURLAsset: AVAss ...
- 【GO】GO语言学习笔记四
流程控制 1.条件语句 举个栗子: if x>5 { return 1; }else{ return 0; } 注意: 条件语句不需要使用括号将条件包含起来(); 无论语句体内有几条语句, ...
- 你年纪轻轻怎么这么"不讲理"
今天在公交上遇到一出"精彩的打戏",这给我的12月份带来了一丝的"惊喜",1号就能让我碰到这样的事,看来这个月会惊喜不断啊!!!! 这精彩的戏是这样的,公交到了 ...
- lower函数
将大写字母变成小写 >>> a='AAABBBccc' >>> a.lower() 'aaabbbccc'
- 某预约系统分析 > 某区公共自行车租车卡在线预约,关于如何提高成功概率
概诉 网上提交预约申请单,线下面交完成实体卡的交付和办理. 本文主要从技术角度分析预约页面,仅供初学者技术交流使用. 表单输入和校验 系统通过2步的确认点击到达信息输入页面. 地址:/bjggzxc/ ...
- 讯时网关IP对接PBX
先配置呼入 1.在网关的中继线绑定号码 2.在路由表写入到PBX 路由到 pbx IP 绑定的号码和路由的 fxo后面的数字要一致 3.在PBX 建一个sip中继,host为网关IP 4.创 ...
- jshzoi
解题报告——2018级2016第二学期第一周作业 解题报告——2018级2016第二学期第一周作业 D 算24 题目描述 描述 给出4个小于10个正整数,你可以使用加减乘除4种运算以及括号把这4个 ...
- webpack详细配置讲解
//常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...
- gravity与layout_gravity的区别
android:gravivty 控件的内容显示位置 android:layout_gravity 控件在屏幕的布局位置,相对于容器或者父控件的位置
- CSUOJ_1002
/* * Title : A+B(III) * Data : 2016/11/09 * Author : Andrew */ #include <iostream> #include &l ...