为什么我的article里的图片没有隐藏多出来的部分。

我已经在.main > article里设置了overflow:hidden ，也为article设置了固定的宽度。但是为什么图片还是往下面跑了。下面是代码。第一张图是

HTML部分的代码：

<!DOCTYPE html>

<html>

<head>

<title>imooc</title>

</head>

<body>

<div>

<nav>

<a href="index.html">Course</a>

<a href="index.html">Actual</a>

<a href="index.html">Notes</a>

</nav>

</div>

</header>

<ul>

</ul>

</section>

<aside>

<h1>Recnet <samp>Course</samp></h1>

<dl>

<dt>Hyper Text Markup Language</dt>

<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>

</dl>

<dl>

<dt>Cascading style Sheets</dt>

<dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>

</dl>

<dl>

<dt>Javascript</dt>

<dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>

</dl>

<dl>

<dt>AngularJS</dt>

<dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>

</dl>

</aside>

<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>

<p>We provide the latest knowledge to help you cope with the changing world!</p>

<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>

<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>

</article>

</section>

<div>

<span>

</span>

</div>

</footer>

</body>

</html>

这是CSS的代码：

*{margin:0; padding:0; font-family:Arial; font-size:14px;}

a{text-decoration:none;}

ul{list-style:none}

header{height:80px; background-color:#0F0F0F; }

header > .container{width:1200px; margin:0 auto;}

header > .container > a{display:block; float:left; margin:5px 25px;}

header > .container > nav{float:right;}

header > .container > nav > a{font-size:20px; display:block; height:73px; width:110px; float:left; line-height:73px; text-align:center; color:#F1EAEA;}

header > .container > nav > a.Home{background-color:#433b90;}

header > .container > nav > a.Course{background-color:#017FCB;}

header > .container > nav > a.Actual{background-color:#78B917;}

header > .container > nav > a.Plan{background-color:#feb800;}

header > .container > nav > a.FAQ{background-color:#f27c01;}

header > .container > nav > a.Notes{background-color:#d40112;}

header > .container > nav > a:hover,header > .container > nav > a.active{padding-bottom:7px;}

.banner{background:#eaeaea;}

.banner > ul{position:relative; width:1490px; height:538px; margin:auto; padding-top:10px;}

.banner > ul > li{position:absolute; width:610px; height:300px; overflow:hidden;}

.banner > ul > li.active{z-index:2; top:37px; right:0; left:0; width:960px; height:460px; margin:auto; border:1px solid #fff;}

.banner > ul > li.left{z-index:1; top:0; bottom:0; left:0; margin:auto;}

.banner > ul > li.right{z-index:1; top:0; right:0; bottom:0; margin:auto;}

.banner > ul > li > img{position:absolute; left:-30%; height:100%;}

.main h1{font-size:30px; font-weight:lighter; margin-bottom:23px;}

.main h1 > samp{font-size:30px; color:#7c7c7c;}

.main{width:1200px; height:473px; margin:34px;}

.main > aside{float:left; width:450px;}

.main > aside > dl{position:relative; display:block; height:74px; margin-bottom:17px;}

.main > aside > dl > dt{position:absolute; top:-1px; left:92px; font-size:16px; font-weight:bold; line-height:16px; text-decoration:underline;}

.main > aside > dl > dd:first-of-type{position:absolute; left:0;}

.main > aside > dl > dd:last-of-type{position:absolute; top:20px; left:90px;}

.main > articl{float:right; width:720px; overflow:hidden;}

.main > articl > p, .main > articl > img{margin-bottom:20px;}

，第二张图是css的代码是我的效果图图片跑下面去了。

晓白菜 2017-02-08

源自：HTML5网页布局 2-4 html5页面布局（表现层_main）

收起

3回答

静静静静Y 回答被采纳获得+3积分 2017-03-21 15:07:31

。。。无力吐槽

.main > articl{float:right; width:720px; overflow:hidden;}

.main > articl > p, .main > articl > img{margin-bottom:20px;}

自己检查检查啊，是article啊，你少写了个e

这种错误浏览器又不会报错，复制到sublime里面，一眼就看出来的，选择器字体颜色articl是白色的。。article是红色的

收起回答

晓白菜提问者 #1

哎，的确是我大意了。我已经检查出来了。实在是脸红

2017-03-21 17:51:13
静静静静Y 回复提问者晓白菜 #2

噗。。摸摸。。

2017-03-22 10:24:24

小于飞飞 2017-02-08 17:25:29

亲，代码不要传图片，同时最好把全的代码传上来，这样好测试与检查问题所在呦，祝学习愉快。

收起回答

提问者晓白菜 #1

老师，我已经把HTML的代码和CSS代码放上去了。麻烦你帮我看看那里出了问题，我反复的看了好几次

2017-02-08 18:21:27

盗墓小哥 2017-02-08 17:24:06

要给图片设置宽度啊，它太大了放不下，所以到下面去了

收起回答

提问者晓白菜 #1

我看了看视频中，老师的那个并没有给图片设置宽度和高度，我也设置了OVRFLOW：hidden。应该是多出来的部分会隐藏的啊

2017-02-08 18:24:53
小于飞飞回复提问者晓白菜 #2

确定传的代码无误，css样式与html代码匹配不上。

2017-02-09 15:56:21