二列布局时的发现

<div>

  <div style="float:left;width:120px;background-color:red;">    <p>左侧div</div>

  </div>

  <div style="width:70%;margin-left:120px;background-color:pink;">    <p>右侧div</div>

  </div>

</div>

执行结果:左侧div的右边框会紧挨着右侧div的左边框,但它们之前没有空隙,

margin-left:120px; 亲没有让左右2边的div之前产生120px的左外边距。原因:因为左div进行了浮动
float:left; ,浮动后脱离文档流,紧靠在边缘,而右侧div并没有进行浮动,会根据顺序文档流继续排版下去,所以当设置
margin-left:120px; 时,是将右侧的div,从body的左边框处为起始,添加了左处边距。所以,正好是等于右侧div的宽度,所以就正好紧挨在一起。如果 右侧div的左外边距大于左侧div的宽度时,大于多少px值,则会将左侧div与右侧div之间添加间隙,间隙的值便是 右侧div - 左侧div 的px值 。
时间: 2024-12-28 05:56:28

二列布局时的发现的相关文章

二列布局 左边固定宽度 右边响应

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>二列布局 左边固定宽度 右边响应</title> <style> html{ height: 100%; } body{ height: 100%; margin: 0; padding: 0; } .left{ width: 200px; heig

二列布局

本文讲解的是左侧一列定宽,右侧主体宽度自适应布局 这种布局有以下几个难点: 如题,左侧一列定宽200px,右侧主体区块宽度自适应 处于页面优化考虑,应先加载右侧主体区块再加载左侧定宽列,所以右侧主体区块div要写在左侧定宽区块div前面 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style>

八种创建等高列布局

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

八种创建等高列布局(转载)

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

八种创建等高列布局【出自w3c】

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

简单的CSS网页布局--一二列布局

1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览

css多列布局(实例)

前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>一列布局</title> </head> <body> <div class="head">head</div> <div class=&quo

第三天 二列和三列布局

http://www.aa25.cn/div_css/904.shtml 今天学习<十天学会web标准(div+css)>的二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度 下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助c

解决CSS3多列样式column-width布局时内容被截断、错乱

一.问题 使用CSS3的column-width: auto | <length>属性时,出现排列的内容被截断,出现错位的现象. 二.原因 需要为图片容器设置高度,不然会崩掉. 三.解决方法 给需要分列的容器加上height:100%;overflow: auto;. 解决CSS3多列样式column-width布局时内容被截断.错乱