CSS 两列布局 之 左侧适应,右侧固定 3种方式
CSS代码:
html,
body,ul,li
#wrapper {
width: 100%;
height: 100%;
padding:;
margin:;
} .left,
.right {
min-height: 500px;
border:;
} .left {
background-color: #999999;
margin-right: 151px; } /*左适应右固定第一种*/
.right {
background-color: #808080;
width: 150px;
float: right;
} .content {
background-color: #CCCCCC;
/*padding-right: 150px;*/
/*width: 100%;*/
} .content li{
float: left;
width: 150px;
}
html代码:
<div id="wrapper">
<div class="right">
右侧菜单
</div>
<div class="left">
<div class="content">
<ul>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
</ul>
</div>
</div> </div>
CSS代码(只需要把第一种注释部分替换即可):
/*左适应右固定第一种*/
/*.right {
background-color: #808080;
width: 150px;
float: right;
}*/ /*左适应右固定第二种(把上面的替换为改代码即可)*/
.right {
background-color: #808080;
width: 150px;
position: absolute;
top: 0px;
right: 0px;
}
CSS代码:
.wrap {
overflow: hidden;
background: #EEE;
} .wrap-right {
width: 300px;
/*position: relative;*/
float: right;
margin-left: -300px;
background: #AAA;
} .wrap-left {
width: 100%;
float: left;
} .left-con {
margin-right: 300px;
background: #DDD;
} .left-con,
.wrap-right {
height: 300px;
}
HTML代码:
<div class="wrap">
<div class="wrap-left">
<div class="left-con">
我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc
</div>
</div>
<div class="wrap-right">
<a href="" target="_blank">我是mmmmmm</a>
</div>
</div>
最终效果:
CSS 两列布局 之 左侧适应,右侧固定 3种方式的更多相关文章
- css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- css两列布局,一边固定宽度,另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- CSS两列布局的N种实现
一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- CSS两列布局的多种方式
两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...
- div 两列布局,左侧固定宽度px,右侧自适应宽度,满屏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- CSS两列布局
方法1:左边设置绝对定位,右边设置左外边距,大小和左边的宽度相等 //CSS部分: .contain{ position :relative; height: 300px; } .left{ posi ...
随机推荐
- 使用django开发博客过程记录5——日期归档和视图重写
针对每条博客的观看次数我么是使用django的Mixin实现的: def get(self, request, *args, **kwargs): last_visit = request.sessi ...
- 检查Linux服务器性能
如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出Linux性能问题所在? 概述通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. • uptime• ...
- PHP优化小建议
PHP优化小建议 1 .. foreach 效率更高,尽量用 foreach 代替 while 和 for 循环 2 ..循环内部不要声明变量,尤其是对象这样的变量 3 ..在多重嵌套循环中,如有可能 ...
- mysql-开启慢查询&所有操作记录日志
在运营网站的过程中,可能会遇到网站突然变慢的问题,一般情况下和 MySQL 慢有关系,可以通过开启慢查询,找到影响效率的 SQL ,然后采取相应的措施.下面介绍一下如何开启慢查询: 1.开启慢查询 找 ...
- 【Redis安装学习】
1.Redis 中文官网地址:http://www.redis.net.cn/download/ 这里只是简单的安装了下.具体的官网有详细的介绍和安装:跳转 如何安装 下载,解压,编译: $ wget ...
- iOS多线程-RunLoop简介
什么是RunLoop? 从字面上来看是运行循环的意思. 内部就是一个do{}while循环,在这个循环里内部不断的处理各种任务(比如:source/timer/Observer) RunLoop的存在 ...
- Java动态加载JAR包
参考代码: package org; import java.io.File; import java.net.URL; import java.net.URLClassLoader; import ...
- beaglebone black 固定IP上网(ubuntu16.04,console)
今天把beaglebone black搞了下,让能通过网线上网.需要修改一些文件.刷的是ubuntu16.04系统,没有界面.不过资源占用很少,顺便说一下.系统下的vi不好用,没有安装vim. 下面的 ...
- uboot 第三天学习
make jCPU_NUM 以CPU_NUM数量同时进行编译CPU_NUM = 当前PC的处理器数量*处理器的核心数 从上电开始1.系统上电,执行固化在IROM中的代码,目的初始化基本的系统功能,已经 ...
- XML基础
什么是XML? XML(Extensible Markup Language)可扩展标记语言,是一种以简单文本格式存储数据的方式. 它最重要的组成部分是XML元素,包含了文档的实际数据. XML的几个 ...