css回顾之左侧宽度自适应布局
目标：
<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
<title>alibaba</title>
<style type="text/css">
.main{
margin: 5px;
overflow: hidden;
/* border: 1px solid #000;*/
}
.column{
border: 1px solid #000;
}
.left{
float: left;
width: 100%;
}
.right{
float: left;
width: 200px;
margin-left: -204px;
}
.real{
margin-right: 210px;
border: 1px solid blue;
height: 300px;
}
</style>
</head>
<body>
<div class="main">
<div class="left column">
<div class="real">content - 自适应宽度</div>
</div>
<dis class="right column">aside - 定宽200px</div>
</div>
</body>
</html>
第一步：两个div设置固定高度，右边的设置固定宽度，并且都float:left;
第二步：右边的div设置固margin-right，让它能和左边的div并排显示；
第三步：在左边的div中再添加一个小div#real，由它来撑开div#left 设置margin-right,值为div#right的宽
主要思想——借鉴双飞翼布局！
css回顾之左侧宽度自适应布局的更多相关文章
- [转]css实现左侧宽度自适应，右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- BFC之宽度自适应布局篇
说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过.当时的核心思想主要是利用float+margin的形式.利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应 ...
- table-cell实现宽度自适应布局
利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...
- 老生长谈：css实现右侧固定宽度，左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈，温故知新：css实现右侧固定宽度，左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- css实现右侧固定宽度，左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
- 在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？
首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...
- 同一行多个div宽度自适应布局
主要运用到的是:布局神器display:table-cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 自动平均划 ...
- CSS实现高度和宽度自适应
其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...
随机推荐
- 基于Jmeter的自动化测试实施方案设计
前言: Jmeter是目前最流行的一种测试工具,基于此工具我们搭建了一整套的自动化方案,包括了脚本添加配置.本地配置和运行.服务器配置等内容,完成了自动化测试闭环,通过这种快捷简便高效的方式,希望可以 ...
- PHP自动测试框架Top 10
对于很多PHP开发新手来说,测试自己编写的代码是一个非常棘手的问题.如果出现问题,他们将不知道下一步该怎么做.花费很长的时间调试PHP代码是一个非常不明智的选择,最好的方法就是在编写应用程序代码之前就 ...
- IOS开发之XCode学习014:警告对话框和等待提示器
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.警告对话框和等待提示器的概念 2.警告对话框 ...
- paho.mqtt.c打印日志
mqtt中自身就带有日志系统Log.h和Log.c,这些日志文件是在客户端调用MQTTClient_create函数是初始化的,MQTTClient_create源码如下: int MQTTClien ...
- mongodb的安装和配置
1.下载安装 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0.6.tgz tar zxf mongodb-linux-x8 ...
- 设计模式 --> （8）组合模式
组合模式 组合模式,是为了解决整体和部分的一致对待的问题而产生的,要求这个整体与部分有一致的操作或行为.部分和整体都继承与一个公共的抽象类,这样,外部使用它们时是一致的,不用管是整体还是部分,使用一个 ...
- APP专业的开发公司都有这样一套开发流程，强烈建议收藏！
下面让我们来剖析到底是如何开发App的呢? 1.App界面设计开发: 通过客户提出需求,需要头脑风暴得出合适的方案和设计理念; 确认页面风格,确定整个界面的布局.关键截面的设计.文字.及其他的设计 G ...
- mysql学习第一天
Mysql语句语法 一.数据库定义语句(DDL) 1.alter database 语法 alter database 用于更改数据库的全局特性,这些特性存储在数据库目录中的db.opt文件中.要使用 ...
- 记录一个古老的Sql分页过程
/* 根据单位ID获取排班信息 For:WXX TIme:2017-11-22 */ ALTER proc [dbo].[proc_ScheduleInfo] )='', --单位ID )='', - ...
- UWP 使用Windows.Media.FaceAnalysis.FaceDetector检测人脸
话说现在检测人脸的技术有很多.有在线AI服务,比如Megvii Face++,Microsoft Cognitive Services,Tencent AI等等.还有本地的库实现的,比如OpenCV. ...