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

上面的教程中三列布局的时候为什么不能设置整体宽度,比如说我想设计整体宽度为800px并居中显示,为什么不能实现呢?

<!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; font-weight:bold}

div{ text-align:center; line-height:50px}

.kuandu{width:800px; margin:0 auto}

.left{ width:300px; height:600px; background:#ccc; position:absolute; left:0; top:0}/*左浮动样式*/

.middle{background-color:#606; height:600px; margin:0 300px 0 300px}

.right{ width:300px; height:600px; background:#FCC; position:absolute; right:0; top:0}/*右浮动样式*/

</style>

</head>


<body> 

<div class="kuandu">

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

    <div class="middle">中间的内容部分自适应</div>

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

</div>

</body>

</html>


正在回答

4 回答

因为绝对定位需要相对定位进行定位啊,你这样只有left和right的绝对定位,absolute默认就是以整个html的body进行绝对定位的,一设置这个left:0和top:0你就会直接卡在网页的左上角,因此需要在你的父容器div class="kuandu"里面设置position:relative;将你子div的绝对定位的参照物换成父容器,然后你的子div才能用absolute定位。但是你也可以把代码换成上面那位的直接用relative来定位子div,然后用margin来控制距离

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

慕妹0494540 提问者

非常感谢!
2017-02-07 回复 有任何疑惑可以回复我~

这个教程教的就是自适应效果的三列布局,你要是给整体都设置了宽度并且居中,中间那列就没有自适应宽度的效果了吧

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

.left{ width:300px; height:600px; background:#ccc; left:0; top:0;float:left;position:relative;}/*左浮动样式*/

.middle{width:200px;background-color:#606; height:600px; float:left;position:relative; }

.right{ width:300px; height:600px; background:#FCC; position:relative;right:0; top:0;float:left;}/*右浮动样式*/

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

.kuandu left { width:300px; height:600px; background:#ccc; position:absolute; left:0; top:0}

.kuandu middle {background-color:#606; height:600px; margin:0 300px 0 300px}

.kuandu right{ width:300px; height:600px; background:#FCC; position:absolute; right:0; top:0}

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

慕侠7806636

弄错了
2017-02-05 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

上面的教程中三列布局的时候为什么不能设置整体宽度,比如说我想设计整体宽度为800px并居中显示,为什么不能实现呢?

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