2-13练习题，请老师指点，谢谢！

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    <!--
    body{margin:0;padding:0;}
    .con{
        width:80%;
        text-align:center;
        margin:0 auto;
        padding-top:100px;
    }
    .fir_line{
        background:#2ef;
        width:100%;
        height:500px;
        position:relative;
    }
    .fir_line div{
        width:360px;
        height:214px;
        position:absolute;
        top:50%;
        margin-left:-180px;
        margin-top:-107px;
    }
    .big_left{left:30%;}
    
    .big_right{left:70%;}
    
    .sec_line{
        width:100%;
        height:200px;
        background:pink;
        position:relative;
    }
    .sec_line div{
        width:200px;
        height:60px;
        position:absolute;
        top:50%;
        margin-left:-100px;
        margin-top:-30px;
    }
    .sma_left{left:20%;}
    
    .sma_middle{left:50%;}
    
    .sma_right{left:80%;}
    -->
  </style>
</head>
<body>
  <div class="con">
        <div class="fir_line">
            <div  class="big_left">
                <img src="http//img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/>
            </div>
            <div class="big_right">
                <img src="http//img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/>
            </div>
        </div>
        <div class="sec_line">
            <div  class="sma_left">
                <img src="http//img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"/>
            </div>
            <div class="sma_middle">
                <img src="http//img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"/>
            </div>
            <div class="sma_right">
                <img src="http//img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"/>
            </div>
        </div>
  </div>
</body>
</html>

另外，老师，想请问一句，在div包裹img图片的时候，怎么在div容器不设定宽度和高度的时候使图片自动填充？

明日阳光 2017-12-25

源自：CSS网页布局基础 2-14 编程练习

收起

1回答

小于飞飞回答被采纳获得+3积分 2017-12-26 11:02:51

问题如下：

图片src缺少http
当网页缩小时，会出现重叠，所以给 .con设置min-width: 1000，使到一定宽度不在变化。
代码建议，不设置宽高：

<div class="fir_line">
         <img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"/>
         <img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"/>
</div>

css:

.fir_line{
        background:#2ef; 
    }
img{margin:50px;}

收起回答

明日阳光提问者 #1

好的谢谢老师指点，另外，请教老师一个问题，在我们日常开发中，图片元素是单独用容器来承载，还是直接引用？就比如在这个练习题里图片元素是用div承载，还是直接引用？

2017-12-26 20:37:18
小于飞飞回复提问者明日阳光 #2

代码不唯一，主要根据开发需求与效果来确定使用什么方式，本效果因为没有特殊效果，所以可以直接使用img。

2017-12-27 09:44:21
明日阳光提问者回复小于飞飞 #3

谢谢指导^_^

2017-12-27 20:24:46