请老师过目,指出不足之处,谢谢!

请老师过目,指出不足之处,谢谢!

<!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://img1.sycdn.imooc.com/climg//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://img1.sycdn.imooc.com/climg//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就没有设置高度。

不知道你为什么对不设置高度这么执着


  • WYDWYD008 提问者 #1
    感谢回复,但不是我想要的效果。其实我纠结的就是,你设置了绝对定位之后,如果让绝对定位的之后如何自动撑开高度。就好比我这个问题的离子,为了让dd自动定位,就设置了dl的相对定位。但这时候必须给dl设定一个高度不然就错位了,但是设定了高度dd就不能自动撑开了。所以我想知道如何解决,好吧。我承认我很纠结....
    2017-11-09 16:08:42
  • 嘘_别说话 回复 提问者 WYDWYD008 #2
    你的元素都是定位在一个地方的,不设置高度会重叠在一起,你可以尝试给每个dl设置不同的top值。 另外这块不需要使用定位写,你看我给你的小例子,普通的布局去写就可以,你这样写布局上本身就会比较麻烦!
    2017-11-09 18:35:54
  • WYDWYD008 提问者 #3
    非常感谢!
    2017-11-13 18:40:27
小丸子爱吃菜 2017-11-06 17:17:38

可以尝试把高度设置的大一些,dl的高度就那么大,所以里面的内容一旦超出了,就会覆盖后面的内容;

也可以给文字所在区域的元素设置overflow:hidden;这样即使内容多出来了,也不会覆盖下面的内容,但是超出的内容会被隐藏掉。

要么就不设置固定的高度,让内容自己去撑开。

  • 提问者 WYDWYD008 #1
    感谢老师的回答,但还是想麻烦请教一下老师。我就是想知道如何让高度自己撑开,不设置高度是可以让内容自己撑开。但是就像这个例子一样,我们需要绝对定位。那么必须就需要设定一个高度,不过就会出现重叠无法定位。请老师就以这个例子告诉我一下,这种情况如果让内容自己撑开高度。感谢,感谢!
    2017-11-08 22:24:04
提问者 WYDWYD008 2017-11-06 15:39:00

http://img1.sycdn.imooc.com//climg/5a0011350001637504790203.jpg

请老师看,就是这个问题,不是不能换行,是高度没有撑开导致内容多了会重叠到下面的文字上面了。请问这个问题在不截取字符数量的情况如何解决?

Miss路 2017-11-05 13:11:20

高度自适应不就是要文字多了换行吗?设置宽度那不教宽度自适应,自适应的意思是跟着内容的变化而变化。

  • 提问者 WYDWYD008 #1
    文字多了是可以自动换行,但是如果文字太多了,高度撑不开。多出来的文字会覆盖到下面一个DL上面去,我想知道这个怎么解决,谢谢。这个回复无法截图,我把问题效果截图到回答里面了请老师看看,谢谢
    2017-11-06 15:35:12
Miss路 2017-11-03 18:15:22

代码写的倒是非常整洁,但是效果和要求有点差距,你再看一下原型图,左边的和右边的内容是底部对齐的,可以再调整一下。

关于说dd不能自适应的问题,只要给dd设置了宽度,他就会自动换行的。

祝学习愉快!

  • 提问者 WYDWYD008 #1
    谢谢老师,没仔细看效果图。等会在重新改一下。关于dd我的问题不是宽度自适应,我是想问高度如何自适应?设置宽度文字多了是会自己掉下来,但如果在多了高度不会自己撑开请问如何解决,谢谢
    2017-11-05 07:55:54
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师