源码如下: margin-left 指的是左边的外边距,为正数时,左边间距增大,div向右偏移,为负数时,左边间距减少,相反往左偏移

双飞翼

.wrap {
width: 100%;
margin: 0 auto;
}

    .left {
width: 15%;
height: 700px;
background: red;
float: left;
bottom: 0px;
/*margin-left: -100%;*/
} .right {
width: 15%;
height: 700px;
background: red;
float: right;
/*margin-left: -15%;*/
} .main {
width: 100%;
float: left;
background: pink;
text-align: center;
} .content {
height: 700px;
width: 70%;
background: yellow;
margin: 0 auto;
}
</style>
content

left
right

CSS理论:margin-left在float中的运用的更多相关文章

  1. DIV+CSS:Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  2. 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  3. CSS布局总结及实际应用中产生的问题

    布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...

  4. 精简高效CSS系列之二——浮动float

    一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1 ...

  5. CSS的margin属性:详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  6. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  7. CSS盒子模型(boeder)+浮动(float)+定位(position)

    盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 =  内容的宽(wid ...

  8. CSS 在IE6, IE7 和IE8中的差别////////////////z

    CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...

  9. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

随机推荐

  1. Mybatis源码详解系列(四)--你不知道的Mybatis用法和细节

    简介 这是 Mybatis 系列博客的第四篇,我本来打算详细讲解 mybatis 的配置.映射器.动态 sql 等,但Mybatis官方中文文档对这部分内容的介绍已经足够详细了,有需要的可以直接参考. ...

  2. 模糊字符串匹配:FuzzyWuzzy

    FuzzyWuzzy 模糊字符串匹配,它使用Levenshtein Distance来计算简单易用的包中序列之间的差异. 前置条件 Python 2.7 or higher difflib pytho ...

  3. TensorFlow keras 迁移学习

    数据的读取 import tensorflow as tf from tensorflow.python import keras from tensorflow.python.keras.prepr ...

  4. linux 磁盘存储和文件系统

    1.磁盘结构 设备文件:关联至一个设备驱动程序,进而能够与之对应硬件设备进行通信 I/O Ports:I/O 设备地址 一切皆文件:open(),read(),write(),close() 设备类型 ...

  5. php-fpm运行原理

    来源:https://blog.csdn.net/sinat_38804294/article/details/94393621 一.php-fpm由来1.cgi (common gateway in ...

  6. 解决laravel5.4视图不生效的坑

    遇到这种坑,主要是路由的问题 1.看看是不是单词拼错了 Route::get('/posts/{post}','\App\Http\Controllers\PostController@show'); ...

  7. DZ的CURD

    Discuz二次开发-MySQL插入数据(insert) DB::insert($tableName,$data,$flag); $tableName:表名 $data:插入数据,以字段为键值的关联数 ...

  8. 2019-2020-1 20199329《Linux内核原理与分析》第三周作业

    <Linux内核原理与分析>第三周作业 一.上周问题总结: 第二周头脑风暴完成较慢 虚拟机libc配置错误 书本知识使用不够熟练 二.本周学习内容: 1.实验楼环境虚拟一个x86的CPU硬 ...

  9. [Ubuntu ] Vim Error E492 - Not an editor command: PluginInstall

    git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/plugin/Vundle.vim https://stackoverflow.co ...

  10. Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...