我的代码和在chrome下的显示效果如下，请问代码有啥问题吗？还有盒子里面的文字怎么设置在正中间的呀？特别是那个mainbody里面的文字是咋设置未知的？

<!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">
.box{width:960px;margin:0 auto;padding:0;}
.box .head{height:30px;background:#F30;}
.box .mainbody{width:700px;height:600px;background:#FC3;text-align:center;font-size:30px;color:#FFF;}
.box .left{width:460px;height:200px;background:#000;float:left;text-align:center;font-size:30px;color:#FFF;}
.box .right{width:260px;height:600px;background:#6C6;;float:right;text-align:center;font-size:30px;color:#FFF;}
.box .copyright{height:30px;background:#903;}
</style>
</head>
<body>
<div class="box">
	<div class="head">head</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="mainbody">mainbody</div>
    <div class="copyright">copyright</div>
    
    
</body>
</html>

福尔摩牙

2016-03-09

源自：网页布局基础 3-5

关注问题我要回答

337

操作

收起

5 回答

福尔摩牙提问者
2016-03-10

自己还大意了，没有把box这个div加闭合标签。

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

Hadooper
2016-03-09

除了在.right的样式中增肌text-align:center;，再增加line-height:200px;

.right和mainbody一样操作即可

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

#1

福尔摩牙提问者

我试了下，加行高是可以的。多谢！

2016-03-10 回复有任何疑惑可以回复我~

qq_覗水翛_0
2016-03-09

你在body、left、right三个CSS里面写了：text-align:center这一句话。表示它们里面的内容居中显示

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

宝慕林4266761
2016-03-09

让mainbody自动适应，把它看做一个大背景就可以，不必加长宽。

你的这些颜色块排列样式是靠float完成的。

而text-align，顾名思义，text——文本；align——排列成线。你的text-align：center 成为了文本居中。

字号是你自己加的吧。

一点看法，聊供参考

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

#1

福尔摩牙提问者

多谢指导！但是怎样可以把文字设置在如题所示的位置呢？这个不会。

2016-03-10 回复有任何疑惑可以回复我~

#2

宝慕林4266761

text-align：center就是文字居中啊……你再看一遍我上面写的

2016-03-10 回复有任何疑惑可以回复我~

小柚eook
2016-03-09

在某一行居中用div{text-align:center;}

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

#1

福尔摩牙提问者

多谢提醒，可以减少不少代码！

2016-03-10 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

网页布局基础

参与学习 214705 人
解答问题 1756 个

让你精通CSS中三大定位机制，彻底掌握网页布局的相关知识

我的代码和在chrome下的显示效果如下，请问代码有啥问题吗？还有盒子里面的文字怎么设置在正中间的呀？特别是那个mainbody里面的文字是咋设置未知的？

我要回答关注问题

意见反馈帮助中心 APP下载