为了账号安全,请及时绑定邮箱和手机立即绑定

异想天开,尝试了下这个方法,结果就像图片那样?求大神指点下

<!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>

body{margin: 0;padding: 0;}

.left,.right,.main{height: 600px;}

.left{width:20%;float: left;background: red;}

.main{width:60%;margin: 0 auto;background: blue;}

.right{width:20%;float:right;background: black;}

</style>

</head>

<body>

      <div class="left">left</div>

      <div class="main">main</div>

      <div class="right">right</div>

</body>

</html>

http://img1.sycdn.imooc.com//57c13e6000017a7113410642.jpg

(图截取了一部分)

正在回答

2 回答

不要用浮动,用position定位,把浮动都去掉,给left和right一个绝对定位,把main的宽度去掉,margin值改一下就好了

0 回复 有任何疑惑可以回复我~
#1

Blizzard_lihe 提问者

非常感谢!
2016-08-29 回复 有任何疑惑可以回复我~

谢谢楼上的答案,我想知道的是为啥出现这种情况?后来也遇到过

0 回复 有任何疑惑可以回复我~
#1

南埝陈陈

你是想让黑色块上去吗?那就把html改一下: <div class="left">left</div> <div class="right">right</div> <div class="main">main</div>
2016-09-20 回复 有任何疑惑可以回复我~
#2

慕少7532173 回复 南埝陈陈

DOM流的顺序跟浏览器表现顺序不同。
2016-10-24 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
如何用CSS进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

异想天开,尝试了下这个方法,结果就像图片那样?求大神指点下

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信