看似居中图片没居中,还有怎么让文字满行显示

来源:2-7 编程练习

慕尼黑1589570

2017-07-11 21:31:23

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

   *{

       padding:0;

       margin:0;

   }

   .container{

       width:80%;

       margin:0 auto;

       }

   .container-1{

       text-align:center;

       font-size:20px;

       font-weight:bolder;

   }

   .header-2{

       margin:0 auto;

   }

   

   .com{

       width:40%;

       float:left;

       padding:20px;

   }

   .comer{

       font-family:"微软雅黑";

       font-weight:border;

       text-align:center;

   }

/*此处写代码*/

</style>

</head>

<body>

    <div class="container">

            <div class="container-1">

                ENJOY THE LIFE

            </div>

            <div class="header-2">

            <div class="com">

                <img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg"/>

                <div class="comer">sadasda sdasd asfasfasdasdasf zxcsfasa<br/>

                                 fgdga sdf sdfafsd afdsf adsfd safdsfasd</div>

                 </div>

            <div class="com">

                <img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"/>

                <div class="comer">sadasda sdasd asfasfasdasdasf zxcsfasa<br/>

                                 fgdga sdf sdfafsd afdsf adsfd safdsfasd</div>

            </div>

            </div>

    </div>

<!-- 此处写代码 -->

    </body>

 </html>


写回答

1回答

怎么都被占用了呢

2017-07-12

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

   *{

       padding:0;

       margin:0;

   }

   .container{

       width:55%;

       margin:0 auto;

       }

   .container-1{

       text-align:center;

       font-size:20px;

       font-weight:bolder;

   }

   /*.header-2{

       margin:0 auto;

   }*/

   

   .com{

       width:45%;

       float:left;

       padding:20px;

   }

   .com img{

    width:100%;

   }

   .comer{

       font-family:"微软雅黑";

       font-weight:border;

       /*text-align:center;*/

   }

/*此处写代码*/

</style>

</head>

<body>

    <div class="container">

            <div class="container-1">

                ENJOY THE LIFE

            </div>

            <div class="header-2">

            <div class="com">

                <img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg"/>

                <div class="comer">sadasda sdasd asfasfasdasdasf zxcsfasafgdga sdf sdfafsd afdsf adsfd safdsfasd</div>

                 </div>

            <div class="com">

                <img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"/>

                <div class="comer">sadasda sdasd asfasfasdasdasf zxcsfasafgdga sdf sdfafsd afdsf adsfd safdsfasd</div>

            </div>

            </div>

    </div>

<!-- 此处写代码 -->

    </body>

 </html>


0

0 学习 · 36712 问题

查看课程