[CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽
一种常见的3列布局，左右两列固定宽度、中间列自适应满宽。整个网页不出现横向滚动条
纯CSS实现
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left{
float: left;
width: 200px;
height: 200px;
background: red;
}
.right{
float: right;
width: 200px;
height: 200px;
background: #133;
}
.main{
margin-left:200px;
margin-right: 200px;
background: green;
height: 200px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div> </body>
</html>
[CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽的更多相关文章
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- 两列布局，读《css那些事儿》
两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
随机推荐
- 很靠谱linux常用命令
vim是打开vim编辑器,别的编辑器还有vi(功能没有vim 强大),nano,emacs等等,感觉还是vim最强大,其次是vi,别的就要差一些了. 我听我们老师说,用图形界面本身已经会被高手笑了,如 ...
- nmon 命令
nmon 命令 用途 以交互方式显示本地系统统计信息并以记录方式记录系统统计信息. 语法 交互方式: nmon [ -h ] nmon [ -s < seconds >] [ -c < ...
- /etc/rc.d/rc.local linux启动自动开启某些服务（转）
/etc/rc.d/rc.local似乎是很多Linux系统管理员的偏爱,因为凡是需要随系统自动启动的服务.程序等,只要系统没有提供Sys V风格的启动脚本,就把这些需求都塞到/etc/rc.d/rc ...
- HDU4135Co-prime（容斥原理）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4135 题目解析: 给你一个闭区间[A,B](1 <= A <= B <= 1015) ...
- Virtualbox中win7虚拟机中U盘不可用问题的解决
Virtualbox版本是5.0.0,主机运行多是Ubuntu12.04 LTS,虚拟机是Win7 X64.起初Win7正常运行,Virtualbox的增强功能已安装.下面是如何一步一步解决U盘不可用 ...
- redis—Spring中redis缓存的简单使用
这里使用的是 Spring-4.3 , redis-2.8 的版本 1.添加maven依赖 <dependency> <groupId>redis.clients</ ...
- Codeforces Round #530 (Div. 2) Solution
A. Snowball 签. #include <bits/stdc++.h> using namespace std; ], d[]; int main() { while (scanf ...
- jmeter -xml日志格式中网络时间与服务器时间的区分
在 LR 中是有一个“网页细分图”的,通过这个图,你可以比较容易的区分哪些请求的响应时间最长,如果响应时间过程,是消耗在server处理的时候,还是消耗在网络传输过程中——也就是所谓的 Server ...
- java--jvm启动的参数
java启动参数共分为三类其一是标准参数(-),所有的JVM实现都必须实现这些参数的功能,而且向后兼容:其二是非标准参数(-X),默认jvm实现这些参数的功能,但是并不保证所有jvm实现都满足,且不保 ...
- 异常来自HRESULT:0x80070422
今天同事使用一个用VB.NET2008开发的应用程序时提示“出现了下列应用程序错误:无法启动服务,原因可能是已被禁用或与其相关联的设备没有启动.(异常来自HRESULT:0x80070422)” ...