<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
/*

body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;background-color:#ccc;}
.main{width:100%;height:350px;overflow:hidden;background-color:#f90;}
.left{ width:200px;height:inherit;background-color:#6495ED;float: left;}
.right{width:55%;height:inherit;float:right;background-color:lightgreen;}
.foot{width:100%;background-color:#DC143C;}

*
* 1-1:我打算是这么写的，很不高级，尤其是右边，根据页面的变化，他会向左挤掉left；看慕课兄的代码如下：*/
.top{width:100%; height:50px;background:#ccc;}

.main{width: 100%;/*width:1000px;*/ position:relative;height:300px;background:#f90;}
.foot{width:100%;height:100px;background-color:#DC143C;}
/*.left{width:200px;height:300px;background:#6495ED;position:absolute;}*/

/*第二种也有问题*/
/*2-2:为什么非要absolute呢?他是相对于body呀在这里,当main有定值时还通用吗?*/
/*2-3:实验证明是不可以的*/
/*2-4:既是他这中方法，也是让right盒子一直超出，还有水平滚动条。*/
/*.right{margin-left:210px;width:100%;height:300px;background:lightgreen;position:absolute;}*/
/*2-1:通过position:absolute和定值margin-left,这样width就可以设置成100%,进而成了响应式,不管窗口多大都不会挤掉left的效果*/
/*1-1:其实一开始的让右边自适应,我想到的是width100%,但是会把left覆盖住.我这就没想到margin-left呢!*/

/*第三种方法是可以*/
.left{width: 200px;height: 300px;background:#6495ED;position: absolute;left:0;top: 0;}
/*用left：0,top：0,固定left的位置。然后用right的margin-left把左边的位置给让出来*/
.right{height:300px;/*width:100%;*/background:lightgreen;margin-left: 210px;}
/*right不设置宽度，如果设置了宽度100%，就会出现水平条*/

/*第四种也可以*/
/*.main{width:100%;height:300px;background-color:red;}

.left{ width:200px;height:300px;background-color:blue;float:left;}

.right{height:300px;background-color:green;position:absolute;left:210px;right:0px;}*/
/*方法是利用左侧浮动固定宽度,右侧通过绝对定位,*//*right不设置宽度，如果设置了宽度100%，就会出现水平条*/
/*
总结
* 普遍就是通过position的相对，绝对定位，++top，right，left；的相互配合，或通过margin的移动，实现效果。这里foot处没有清除浮动。看上去没什么影响就不清楚了。
*
* */
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div><!--实现右侧先加载-->
<div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>
</html>

CSS-混合布局的几种方法（正确的方法和错误的原因）的更多相关文章

  1. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  2. css左右布局的几种实现方式和优缺点

    记录一下左右布局的实现方式,实现的具体效果是,左侧固定宽度,高度适中等于父元素的高度,父元素的高度由右侧内容决定: html代码如下: <div class="parent" ...

  3. 实现CSS等分布局的5种方式

    前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...

  4. css居中布局的几种方式

    一.水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置widt ...

  5. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  6. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  7. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  8. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  9. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

随机推荐

  1. coursera 公开课 文本挖掘和分析（text mining and analytics） week 1 笔记

    一.课程简介: text mining and analytics 是一门在coursera上的公开课,由美国伊利诺伊大学香槟分校(UIUC)计算机系教授 chengxiang zhai 讲授,公开课 ...

  2. 记一次在Linux上面启动部署在tomcat服务器的程序

    前提:Linux系统已安装好jre环境 1.文件结构: 文件说明: 部署文件包含以下文件:1.apache-tomcat-7  程序运行的应用服务器tomcat包含: war包:apache-tomc ...

  3. hdu2642二维树状数组单点更新+区间查询

    http://acm.hdu.edu.cn/showproblem.php?pid=2642 题目大意:一个星空,二维的.上面有1000*1000的格点,每个格点上有星星在闪烁.一开始时星星全部暗淡着 ...

  4. Android布局方式_RelativeLayout

    RelativeLayout(相对布局)允许子元素指定它们相对于其他元素或父元素的位置(通过ID指定),因此用户可以右对齐,或上下对齐,或置于屏幕中央的形式来排列两个元素. RelativeLayou ...

  5. Day Four(Beta)

    站立式会议 站立式会议内容总结 331 今天:增加了若干话题:建立chat–user类,查阅bmob文档. 明天: 学习bmob的sql操作 442 今天:登录信息在主页上更新数据 遇到的问题:无 明 ...

  6. “CEPH浅析”系列之八——小结

    最初决定写这些文章的时候,本打算大致记录一下,几千字也就了事了.可是越写越觉得东西多,不说明白总有些不甘心,于是就越写越长,到这儿为止貌似已经有一万七千多字了.除了博士论文之外,应该是没有写过更长的东 ...

  7. 设计模式之UML类图的常见关系

    设计模式之UML类图的常见关系 本文来自转载 烧点饭博客 本篇会讲解在UML类图中,常见几种关系: 泛化(Generalization),依赖(Dependency),关联(Association), ...

  8. [转] EJB到底是什么，真的那么神秘吗？？

    原文地址:http://blog.csdn.net/jojo52013145/article/details/5783677 1. 我们不禁要问,什么是"服务集群"?什么是&quo ...

  9. iOS开发小技巧--获取自定义的BarButtonItem中的自定义View的方法(customView)

    如果BarButtonItem是通过[[UIBarButtonItem alloc] initWithCustomView:(nonnull UIView *)]方法设置的.某些情况下需要修改BarB ...

  10. 通过javascript在网页端生成zip压缩包并下载

    zip.js是什么 zip.js的github项目地址:http://gildas-lormeau.github.io/zip.js/ 通过zip.js封装一个能在网页端生成zip文件的插件, 直接在 ...