页面在缩小到一定宽度时，最右边的box-item中内容会发生缩减
来源：3-3 编程练习
慕用0863198
2019-02-26 22:53:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端</title>
<style>
*{
margin:0px;
padding:0px;
}
.box{
display: flex;
justify-content: space-between;
}
.box>.box-item{
box-shadow: 0px 0px 3px gray;
width: 16%;
flex: 1;
margin-right: 1%;
}
.box>.box-item:nth-child(1){
margin-left: 1%;
}
.box-item{
display: flex;
flex-direction: column;
padding: 5% 2% 2% 2%;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<img src="http://climg.mukewang.com/591411a400018ad902000200.jpg" alt="">
<h1>快乐动起来呀</h1>
<p>先后在360、去哪儿网、今日头条任资深前端工程师，在业务开发和工程架构方面有较多实战经验。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411b400010aa702000200.jpg" alt="">
<h1>7七月</h1>
<p>作为微信小程序第一波开发者，他受邀编写小程序开发书籍，不久就会出版，他喜欢写代码带来成就感。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411c0000199be02000200.jpg" alt="">
<h1>Geely</h1>
<p>Geely，丰富的互联网项目经验，公司内部技术讲师，热爱技术，乐于分享。教学格言：把复杂的技术简单化，简单的技术极致化</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411b400010aa702000200.jpg" alt="">
<h1>Scott</h1>
<p>是国内最早接触 Node.js 的工程师，也是最早用 Node.js 做开发的工程师之一，拥有大量 Node.js 全站开发经验。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411cb0001483f02000200.jpg" alt="">
<h1>moocer</h1>
<p>曾混迹于企业应用领域，后转战电商，现奋战于互联网教育行业，转眼间已匆匆数年，喜爱技术甚于自己，至今不悔。感天地之广大，岁月之蹉跎，若能重来，仍代码。</p>
</div>
</div>
</body>
</html>
1回答
-
你好，可以参考下面的建议：
1、页面缩小到一定程度时，最后一个box-item中内容没有出现缩减的情况，水平方向上出现了滚动条，最后一个可能部分看不到，拖动滚动就可以看到了：
2、图片应该是圆形的，可以使用border-radius属性完成。
3、标题应该居中显示，可以添加text-align属性居中。
4、效果图中页面缩小的时候每个盒子的高度是不变的，可以给box-item盒子设置固定高度，然后超出隐藏。
页面可以再完善一下，祝学习愉快！
0
相似问题
回答 1
回答 1