右边多处margin和padding 而且栅格系统无法把图分成一行3列和2列
来源：3-2 作业题
陈立天
2020-09-02 11:46:48
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="./css/grid-flex.css"> <link rel="stylesheet" href="./css/index2.css"> </head> <body> <div class="header"> <p class="link">immoc</p> </div> <div class="div-1"> <img src="./img/1.png" alt="img" class="div-1-img"> <p class="div-1-link-1">Imooc</p> <div class="div-1-btn">start</div> </div> <div class="div-2"> <div class="div-2-item">关于慕课网</div> <div class="div-2-item">关于课程</div> <div class="div-2-item">核心团队</div> <div class="div-2-item">新增专题</div> </div> <div class="div-3"> <p class="div-3-title">响应式</p> <p class="div-3-inner"> 当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文 内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用 户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建 一个简单的单页式站点，还是—个专业的公司网站·亦或是一个别具-格的博客? 起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均 采用H和LT5和CSS3实现。起飞页提供了海里精美网站模板和成品网站，几乎覆盖了 当今各个行业，您只需在模板上进行少里修改，即可完成自己的网站，这一切都是免费的。</p> </div> <div class="div-4"> <div class="div-4-title"><p>IMMOC</p></div> <div class="div-4-inner"> <span>welcome to</span> <p>www.imooc.com</p> </div> </div> <div class="div-5"> <div class="div-5-title"> <p>主打课程</p> </div> <div class="container"> <div class="row"> <div class="col-6 col-md-4"><img src="./img/1.jpg" alt=""></div> <div class="col-6 col-md-4"><img src="./img/2.jpg" alt=""></div> <div class="col-6 col-md-4"><img src="./img/3.jpg" alt=""></div> <div class="col-6 col-md-4"><img src="./img/4.jpg" alt=""></div> <div class="col-6 col-md-4"><img src="./img/5.jpg" alt=""></div> <div class="col-6 col-md-4"><img src="./img/6.jpg" alt=""></div> </div> </div> </div> </body> </html>
*{
padding: 0;
margin: 0;
}
.container{
width:100%
}
.header{
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #7ea6ae;
color: #757575;
}
.div-1{
flex-direction: column;
background-color: #B2C5CC;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
.div-1-img{
width: 100px;
height: 100px;
}
.div-1-link-1{
margin-top:5px;
color: #757575;
}
.div-1-btn{
margin-top: 20px;
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: rgb(255, 255, 255);
font-size: 14px;
}
.div-2{
width: 100%;
height: 50px;
display: flex;
border-bottom: 1px solid gray;
justify-content: center;
align-items: center;
}
.div-2-item{
flex: 1;
text-align: center;
font-size: 12px;
}
.div-3{
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
margin-bottom: 40px;
}
.div-3-title{
margin: 40px 0 20px 0;
}
.div-3-inner{
font-size: 12px;
width: 50%;
color: rgb(175, 175, 175);
}
.div-4{
display: flex;
flex-direction: column;
align-items: center;
background-color:rgb(231, 231, 231);
height: 80px;
justify-content: center;
}
.div-4-title{
color: gray;
font-size: 16px;
}
.div-4-inner{
display: flex;
height: 20px;
line-height: 20px;
font-size: 12px;
margin-top: 10px;
}
.div-4-inner span{
color: gray;
margin-right: 10px;
}
img{
width: 100%;
}
写回答
1回答
-
好帮手慕慕子
2020-09-02
同学你好，对于你的问题解答如下：
因为index2.css中给contianer设置宽度百分百，导致实际占据的宽度溢出屏幕宽度，水平方向出现了滚动条，所以右边多出了空白间距。
建议修改：删除container的百分百宽度
统配设置样式样式时，需要添加box-sizing:border-box;属性，让元素实际占据页面的宽度等于设置的width属性值，这样才可以实现图片的布局效果。
另，图片需要设置宽高都为百分百，才可以填充满盒子显示。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题