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

看我这个为什么有问题,

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

*{margin:0; padding:0;}

#wrap{width:770px;margin:0 auto;}

#header{width:100%;height:200px; border:1px solid red;}

#mainbody{width:100%;height:200px; border:1px solid blue;}

#footer{width:100%;height:200px; border:1px solid green;}

img{margin:10px 18px;border:1px solid #b1adad;}

.content{border:4px solid #badbdb; padding:44px 15px 15px; width:770px;}

.book{background:url(images/t_book.gif) no-repeat #eff9f9;}

</style>

</head>


<body>

<div id="wrap">

    <div id="header"></div>

    <div id="mainbody">

        <div class="content book">

        <img src="images/book1.jpg" />

        <img src="images/book2.jpg" />

        <img src="images/book3.jpg" />

        <img src="images/book4.jpg" />

        <img src="images/book5.jpg" />

        </div>

    </div>

    <div id="footer"></div>

</div>

</body>

</html>

http://img1.sycdn.imooc.com//56e15fe800015d3702800239.jpg

正在回答

3 回答

之前的视频里面有吧,那应该是背景图上的,之前他的content的宽度已经改成了700px,只是wrap的宽度是770px。

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

因为一个盒子的实际宽度可以认为是:左右内边距+width+左右border。这样算的话你的content宽度达到了808px

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

可能是背景图片上的吧,你把.content的width从770px改为700px试试

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

hhhs1s1s 提问者

背景长度是770px,content我设置的也是770,
2016-03-10 回复 有任何疑惑可以回复我~
#2

shaoliang 回复 hhhs1s1s 提问者

背景的长度先不改,只把content的长度改成700px试一下,也就是说不让后面那一段背景显示出来。
2016-03-10 回复 有任何疑惑可以回复我~
#3

hhhs1s1s 提问者 回复 shaoliang

那样是可以,但我的目的不是把我背景图片宽度减小,那条向下的竖就是770长度的一边,但是我content设置完770,正常情况下,应该不会多出右边那块,但是它出现了,所以说有毛病,
2016-03-10 回复 有任何疑惑可以回复我~
#4

shaoliang 回复 hhhs1s1s 提问者

如果背景图片上就是有这样一条边,那就是素材的问题了。老师做的时候刚开始也是有这条边的,后来把content的宽度减小了才消失的。你单独打开那个背景图片放大看一下吧。
2016-03-11 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消
网页布局基础
  • 参与学习       214705    人
  • 解答问题       1756    个

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

进入课程

看我这个为什么有问题,

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