整个容器的宽度要怎么设置?
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
html,body{
margin:0;
padding:0;
}
.container{
margin:auto;
border-style:dashed;
width:840px;
}
.row1{
overflow:hidden;
margin:20px 20px 20px 20px;
}
.row1 .cloumn1,.cloumn2,.cloumn3{
width:240px;
border:solid;
float:left;
margin-right:20px;
}
.row2{
margin:0 20px 20px 20px;
overflow:hidden;
}
.row2 .cloumn1,.cloumn2,.cloumn3{
width:240px;
border:solid;
float:left;
margin-right:20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="row1">
<div class="cloumn1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="cloumn2">
<img src=http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="cloumn3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<div>欢迎来到慕课网学习新知识!</div>
</div>
</div>
<div class="row2">
<div class="cloumn1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="cloumn2">
<img src=http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg>
<div>欢迎来到慕课网学习新知识!</div>
</div>
<div class="cloumn3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<div>欢迎来到慕课网学习新知识!</div>
</div>
</div>
</div>
</body>
</html>
问题:左边和右边图片与最大容器的间隔不相等,要怎么设置相等?
正在回答 回答被采纳积分+1
整体思路:1个大的div容器有6个小的div,每个小的div容器里存放着一张照片和一个p标签。定义一个class 使6个div同时实现左浮动。设置大容器div 的内边距,设置小容器div的外边距。
修改之后的样式如下图,左右两边的距离都是20px,你的效果是下图这个样式么?
原因是你给row1,row2设置了右外边距20px,然后有给每个元素设置了右外边距20px,修订之后的代码如下图,如果我的建议解决了你的问题,请采纳,祝学习愉快~
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星