css实现左侧固定宽度,右侧宽度自适应
#centerDIV {
height: 550px;
width: 100%;
}
#mainDIV {
height: 100%;
border: 1px solid #F00;
margin-left: 102px;
}
#leftDIV {
float: left;
width: 100px;
height: 100%;
border: 1px solid #F00;
}
<div id="centerDIV">
<div id="leftDIV"></div>
<div id="mainDIV"></div>
</div>
左侧leftDIV的float:left;width固定,右侧的mainDIV用margin-left
css实现左侧固定宽度,右侧宽度自适应的更多相关文章
- HTML和CSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS无序列实现表宽度自适应的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css左侧固定宽度右侧自适应
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- CSS实现侧边栏固定宽度,内容栏自适应
1,固定宽度区浮动,自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下: #wrap { overflow: hidden; *zoom: 1; } #c ...
- 在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?
首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...
- HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
随机推荐
- 基于docker安装pxc集群
基于docker安装pxc集群 一.PXC 集群的安装 PXC集群比较特殊,需要安装在 linux 或 Docker 之上.这里使用 Docker进行安装! Docker的镜像仓库中包含了 PXC数据 ...
- three.js之正投影摄像机与透视投影摄像机的区别
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java高级技术点面试问题-IO相关面试问题
java网络编译: 基础知识:①.ip地址和端口号:ip地址是用来识别网络中的一个实体,而这个实体可以理解为一个主机,而端口号则是用来区分具体的通讯程序的.②.tcp / udp协议:tcp是一个可靠 ...
- std::map 的swap错用
map<int, shared_ptr<int>>map_test; shared_ptr<); map_test[] = tmp_1; shared_ptr<); ...
- oracle 中从一个历史表中查询最新日期数据插入到另一个表中语句
先从历史表中查询最新的一个语句: select t.id from ( select r.*, row_number() over(partition by r.分组字段 order by r.排序时 ...
- Oracle之:Function :getdate()
create or replace function getdate(sp_date varchar) return date is Result date; begin if LENGTH(sp_d ...
- vs2015显示代码行数
打开visual studio 2015,在菜单中点击“工具” --> "选项" -->“文本编辑器” --> "所有语言" -->勾选 ...
- 【JZOJ5801】【2018.8.12省选模拟】circular
题目大意 分析 把环拆开 线段其实就是区间 对于每个区间,向在TA后面并且b_i最小的区间连边, 然后从每个区间(ai,bi)开始,在保证跳到的区间(aj,bj),bj<=ai+m的情况下向后倍 ...
- Codeforces 833B / B34D The Bakery
题 OwO http://codeforces.com/contest/833/problem/B 解 首先读入的时候把数据读入到2 ~ n+1的位置(因为线段树处理不到0,所以后移了一格) dp[i ...
- C语言构建小型Web服务器
#include <stdio.h> #include <sys/socket.h> #include <stdlib.h> #include <string ...