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 API 入门指南 - 闲话安全
原文地址:http://www.cnblogs.com/developersupport/p/WebAPI-Security.html Web API入门指南有些朋友回复问了些安全方面的问题,安全方面 ...
- 关于在datepicker中,只选年月
有这么个需求,datepicker默认是选某个具体的日子的,但是现在只选到年月为止, solution: html如下: <div> <label for="startDa ...
- 解决linux下80端口占用问题
在即安装有tomcat,又安装有nginx的服务器上(典型阿里云驻云java镜像),系统默认配置nginx占用80端口,tomcat占用8080端口. 如果想要便于用户可以直接通过IP或者域名访问到t ...
- 在Eclipse中连接SQL
原创 在Eclipse中连接SQL分为如下几个步骤: 1.加载驱动程序 2.创建连接对象 3.创建执行SQL语句的对象 4.执行SQL语句 5.关闭new出来的对象 1.加载驱动程序(以SQL为例) ...
- IdentityServer4实现单点登录统一认证
什么是单点登录统一认证:假如某公司旗下有10个网站(比如各种管理网站:人事系统啊,财务系统啊,业绩系统啊等),我是该公司一管理员或者用户,按照传统网站模式是这样:我打开A网站 输入账号密码 然后进入到 ...
- ecliplse导入tomcat
上面点击之后,弹出的窗口最大化: 导入成功之后如下图:
- C# 抽象(3)
接上章: 抽象类中有抽象方法,那么可不可以有非抽象方法呢? 答案是可以的. abstract class Human { public abstract void Think(); public ab ...
- Redis在window下安装以及配置
一.安装Redis 1.Redis官网下载地址:http://redis.io/download,下载相应版本的Redis,在运行中输入cmd,然后把目录指向解压的Redis目录. 2.启动服务命令 ...
- leecode刷题(6)-- 两个数组的交集II
leecode刷题(6)-- 两个数组的交集II 两个数组的交集II 描述: 给定两个数组,编写一个函数来计算它们的交集. 示例: 输入: nums1 = [1,2,2,1], nums2 = [2, ...
- CF1137E. Train Car Selection(可删堆)
题面 三个操作 1.在当前数列最左端加入\(k\)个初始为\(0\)的数 2.在当前数列最右端加入\(k\)个初始为\(0\)的数 3.将当前数列从左到右第\(i\)个数加上\(b+(i-1)k(b& ...