请老师过目，指出不足之处，谢谢！
来源：2-5 编程练习
WYDWYD008
2017-11-03 17:28:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
*{margin:0;padding:0;border:none;font-size:14px;font-family: Arial;}
section{width:1200px;margin:0 auto;padding:15px;}
section h1{font-size:26px;font-weight: lighter;margin-bottom:30px;}
section h1 samp{font-size:26px;font-weight:lighter;color:#7C7C7C;}
section > aside {width:450px;float:left;}
section > aside > dl{position: relative;display: block; height: 74px; margin-bottom: 17px;}
section > aside > dl dt{background:url(http://climg.mukewang.com/582e61290001787900500051.png) no-repeat;width:50px;height:50px;line-height:50px;color:#fff;text-align:center;position: absolute;left:20px;}
section > aside > dl dd:first-of-type{position:absolute;left:88px;top:-1px;font-weight:bold;text-decoration:underline; }
section > aside > dl dd:last-of-type{position:absolute;left:87px;top:16px;width:330px;}
section > article{float:right;width:720px;}
section > article p,section > article img{margin-bottom:15px;width:100%;}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp>Course</samp></h1>
<dl>
<dt>1</dt>
<dd>Title 1</dd>
<dd>test sadfjklsda hello asdlkfj afjds aasdfasdfasdfasdfasdfasasdfasdfasdfasdfasdfasdfasdfas dfasdfasdfasdfasdfasdfasdfasdfsdf asdf 234234</dd>
</dl>
<dl>
<dt>2</dt>
<dd>Title 2</dd>
<dd>test sadfjklsda hello asdlkfj afjds <br>asdfkjlasfldj1123</dd>
</dl>
<dl>
<dt>3</dt>
<dd>Title 3</dd>
<dd>test sadfjklsda hello asdlkfj afjds <br>asdfkjlasfldj1123</dd>
</dl>
<dl>
<dt>4</dt>
<dd>Title 4</dd>
<dd>test sadfjklsda hello asdlkfj afjds <br>asdfkjlasfldj1123</dd>
</dl>
</aside>
<article>
<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>
<img src="http://climg.mukewang.com/582e61180001ede703300130.jpg">
<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>
</body>
</html>
请老师指出不足之处，谢谢
并且我还有问题就是如果第二个dd的内容多了高度就会不自适应，请问如果让dd高度自适应？谢谢
5回答
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.big{background-color:red;height:400px;}
.son1{float:left;width:40%;}
.son1 div{background-color:yellow;margin-top:20px;}
.son2{float:right;background-color:green;width:40%;}
</style>
</head>
<body>
<div class="big">
<div class="son1">
<div>12345555555555</div>
<div>12345555555555</div>
<div>12345555555555</div>
<div>12345555555555</div>
</div>
<div class="son2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur porro consequuntur ad maiores obcaecati similique aliquam velit quasi, odio, sequi excepturi, dolorem fugit saepe iusto reprehenderit nam dicta. Qui!</div>
</div>
</body>
</html>我写了demo，看看是不是你要的效果，左侧的div就没有设置高度。
不知道你为什么对不设置高度这么执着
0h017-11-13 -
小丸子爱吃菜
2017-11-06
可以尝试把高度设置的大一些，dl的高度就那么大，所以里面的内容一旦超出了，就会覆盖后面的内容；
也可以给文字所在区域的元素设置overflow:hidden；这样即使内容多出来了，也不会覆盖下面的内容，但是超出的内容会被隐藏掉。
要么就不设置固定的高度，让内容自己去撑开。
0h017-11-08 -
WYDWYD008
提问者
2017-11-06
请老师看，就是这个问题，不是不能换行，是高度没有撑开导致内容多了会重叠到下面的文字上面了。请问这个问题在不截取字符数量的情况如何解决？
0 -
Miss路
2017-11-05
高度自适应不就是要文字多了换行吗？设置宽度那不教宽度自适应，自适应的意思是跟着内容的变化而变化。
0h017-11-06 -
Miss路
2017-11-03
代码写的倒是非常整洁，但是效果和要求有点差距，你再看一下原型图，左边的和右边的内容是底部对齐的，可以再调整一下。
关于说dd不能自适应的问题，只要给dd设置了宽度，他就会自动换行的。
祝学习愉快！
0h017-11-05
相似问题