三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去？
2018-03-06 13:36
435 查看
因为第三个div块是写在第二个div块下面的，而且第二个div块的位置正常，没有浮动，它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。
就好像假如你的第一个向左浮动的div是写在第二个div下面，它也是不可能占到第二个蓝色的位置上去的。左边的元素左浮动,当浮动出中间内容区域范围之后,打印就看不到左边的了,可以直接用固定定位fixed给他定位住, 右边的只能使用左float跳出中间区域,再加fixed定位到固定位置,这样打印只能显示出中间的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="室内全彩型材/css/bootstrap.min.css" rel="stylesheet">
<link href="室内全彩型材/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="public/css/demo.css">
<style>
#div1{
width:300px;
height: 300px;
background: red;
float: left;
margin-left:-350px;
position: fixed;
}
#div2{
/*width:900px;*/
height:100%;
background: red;
}
#div3{
width:400px;
height: 400px;
background: blue;
float: left;
margin-left:1180px;
position: fixed;
top:0;
}
</style>
</head>
<body>
<div class="container">
<div id="div1">
<h1>aaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaa</h1>
</div>
<div id="div2">
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbb</h1>
</div>
<div id="div3">
<h1>aaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaa</h1>
</div>
</div>
</body>
</html>想要做出这种效果,就得先把所有内容居中,再设置尺寸,然后把上下各浮动到两边,完成功能,使用bootstarp可以简单做到
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C语言-将1到9这九个数字分成三个3位数，要求第一个3位数，正好是第二个3位数的1/2，是第三个3位数的1/3。问应当怎样分，编写程序实现。
- PHP 分页获取数据 三个参数 （ 第一个参数获取页数，第二个条件 ，第三个数据为id降序desc或者升序asc）
- 用三个独立按键实现按下第一个时计时停止，按下第二个时计时开始，按下第三个时计数值清零从头开始，秒表设计！！！！
- 4个人晚上要穿过一座索桥回到他们的营地。可惜他们手上只有一支只能再坚持17分钟的手电筒。通过索桥必须要拿着手电，而且索桥每次只能撑得起两个人的份量。这四个人过索桥的速度都不一样，第一个走过索桥需要1分钟，第二个2分钟，第三个5分钟，最慢的那个要10分钟。
- 解第一个数是1，第二个数是1，第三个数是前两个数之和，求第n个数的值。
- 我们认为2是第一个素数，3是第二个素数，5是第三个素数，依次类推。 现在，给定两个整数n和m，0<n<=m<=200，你的程序要计算第n个素数到第m个素数之间所有的素数的和，包括第n个素数和第m个素数
- css怎么设置2个div同行，第一个固定宽度，第二个占满剩余的部分
- 请各位帮忙看一下，第一个程序为什么不能输出和第二个程序一样的结果？这两个程序只有求最大公约束的代码不同
- 用冒泡的思想做一个面试题 ，第一个最大，第二个最小，第三个第二大，第四个第二小，以此类推
- 一个div，弹出第二个div的浮动。
- fread的第二个参数和第三个参数可以互换吗---为什么fread容易返回0 ?
- div+css中的为什么要设置浮动属性，浮动完了为什么又要清除浮动
- 为什么div右浮动的时候,跑到大div的下面;
- 三个div,一个左浮动，一个有浮动，另外一个不浮动引发的样式问题
- 例题：for循环迭代法。一个棋盘有n个格子，第一个格子有一粒米，第二个格子有两粒米，第三个格子有四粒米，依次类推，第n个格子里有多少粒米，棋盘里一共有多少粒米。
- 鼠标称到第一个DIV上，显示第二个DIV的内容，鼠标移开第二个DIV，第二个DIV内容隐藏
- 【练习题】有 3 个回文数字，第一个是两位数，第二个是三位数。将这两个数字相加得到第三个数字，这是个四位数。请问第三个数字是多少？
- javascript随机将第一个dom中的图片添加到第二个div中去