不咋会移动图片,设置外边距就成两行了
来源：2-7 编程练习
慕哥5103152
2019-12-03 10:15:53
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
.one{width: 1000px;margin: 0 auto;background: pink; overflow: hidden;}
.bt{text-align: center;
font-weight: bolder;
font-size: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
.two{float: left;
}
.two .tu1,.zi1{
width: 450px;
height: 250px;
padding: 0px 20px;
}
.two .zi1{
margin-top: -5px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="one">
<div class="bt">ENJOY THE LIFE</div>
<div class="two">
<div class="tu1"><img src="http://img1.sycdn.imooc.com\/climg/58f829090001a4b504260240.jpg"></div>
<div class="zi1">life is like a book,just read more and more refined.more weite more carefully.when read ,mind open.all things hava been indifferent to heart.life is the precipitation.</div>
</div>
<div class="two">
<div class="tu1"><img src="http://img1.sycdn.imooc.com\/climg/58f8290f0001558804260240.jpg"></div>
<div class="zi1">life is like a book,just read more and more refined.more weite more carefully.when read ,mind open.all things hava been indifferent to heart.life is the precipitation.</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，同学是想实现左右两边的间距相等吗？因为同学给父盒子one设置了宽度为1000px，再设置margin值超出父盒子宽度的话，就会变成两行。
1、其实同学可以不用再通过外边距来调距离了，因为每一列的宽度为490px（盒子的宽度450px+左右padding20px），所以可以将盒子one的宽度设置为490*2=980px。参考：
2、因为每一列的宽度为450px，而图片的宽度为426px，所以撑不满父盒子就会有的缝隙，如下：
可以将图片的宽度设置为父元素的100%，撑满父盒子：
3、因为图片的宽度变大了，那么高度也会随之变大，可以再调大一下文字与图片的距离。参考：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 1
回答 2