css布局,面试时经常问的布局
左侧宽固定200,高度自适应,右侧的框宽度都自适应
<style>
* {
margin: 0;
padding: 0;
}
html {
height: auto;
}
body {
margin: 0;
padding: 0;
}
#container {
background: #ffe3a6;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
position: relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等于左边栏的宽度值==*/
position: relative;
}
#main {
float: left;
}
#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
css布局,面试时经常问的布局的更多相关文章
- 面试时,问哪些问题能试出一个 Android 应用开发者真正的水平?【转自知乎】
这几年面过的各种Android开发也有三位数了,failed的不敢说,pass的基本都没有看走眼,来得晚了也想说说我的体会. 一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大 ...
- 面试时,问哪些问题能试出一个Android应用开发者真正的水平?
一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大,需要一些技巧,这里我不局限于回答题主的问题,而是分享一下我个人关于如何做好Android技术面试的一些经验: 面试前的准备 ...
- [随想感悟] 面试时,问哪些问题能试出一个 Android 应用开发者真正的水平?【转自知乎】
这几年面过的各种Android开发也有三位数了,failed的不敢说,pass的基本都没有看走眼,来得晚了也想说说我的体会. 一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大 ...
- 面试时被问到js的绑定事件,我居然不知道怎么回答。回来查了下,做个笔记
事件绑定是几种方法 以下为例: <button id='btn'>click me</button> function Btn(){ alert('click'); } 1.直 ...
- 【闲谈】应聘时要问HR的7个问题
前段时间朋友看了一本书,聊天中告诫了我关于毕业大学生面试时应该问HR的7个问题.这7个问题如下: 我所应聘的这个职位为什么会出现空缺 请问贵公司最成功的员工曾为公司作出了什么样的贡献 如何评估自己在试 ...
- HTML、CSS知识点,面试开发都会需要--No.4 内容布局
No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...
- 前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。
题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...
- 你不知道的css各类布局(三)之自适应布局
自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...
- 你不知道的css各类布局(二)之流体布局、液体布局、栅格布局
流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...
随机推荐
- web开发四个作用域
web开发一共有四个作用域,范围从高到低分为appliaction作用域(全局作用域),session作用域,request作用域和page作用域.${base}是el表达式语法,它会自动先从page ...
- Bitmap压缩到指定尺寸大小,获取圆角、圆形图片
/** * 使用Matrix将Bitmap压缩到指定大小 * @param bitmap * @param w * @param h * @return */ public static Bitmap ...
- C#多线程编程实战1.2暂停线程(休眠)
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- 生成MySql数据库的数据字典代码参考
Code: /** * 生成mysql数据字典 */ //配置数据库 $dbserver = "127.0.0.1"; $dbusername = "root" ...
- 洛谷P3254 圆桌问题(最大流)
传送门 一道良心啊……没那么多麻烦了…… 从$S$向所有单位连边,容量为单位人数,从所有桌子向$T$连边,容量为桌子能坐的人数,从每一个单位向所有桌子连边,容量为$1$,然后跑一个最大流,看一看$S$ ...
- 【SSO单点系列】(5):CAS4.0 单点流程序列图
刚过元旦假期,感觉自己好久没写博客了,今天更新一篇,主要是CAS 的一个流程图. ps: 这两张图 是直接从官网上找的,都是简单的英语,我这种英语四级没过都看得懂,大家应该没有压力. 1.CAS 基本 ...
- spark-2.2.1在centos7安装
前言 在安装Spark之前,我们需要安装Scala语言的支持.在此我选择的是scala-2.11.12版本.jdk8也要保证已经安装好并且配置好环境变量 scala-2.11.12下载 为了方便,我先 ...
- hdu 6196 搜索+剪枝
Today, Bob plays with a child. There is a row of n numbers. One can takes a number from the left sid ...
- 解决CentOS查询不到ip
问题:登陆操作系统,输入ip addr 也可以输入ifconfig查看ip,发现ens33目录中没有inet属性 解答:查看ens33的网卡配置: vi /etc/sysconfig/network- ...
- day--39-MySQL的多表查询
多表查询一:表的基本介绍 可以参考:https://www.cnblogs.com/cdf-opensource-007/p/6517627.html 建立一个员工表信息表和一个部门表,每个员工都对应 ...