看似居中图片没居中,还有怎么让文字满行显示
来源: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>
相似问题