flexbox布局问题？
如图，想让右边的三副小图按照上中下的位置排布，而不想像这样靠上挤在一起。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<img class="bigbanner" src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
<div class="side">
<img src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=2998510202,2367151886&fm=21&gp=0.jpg" alt="">
</div>
</body>
</html>
//css
body {
padding: 15px;
}
.bigbanner {
width: 80%;
padding-right: 5px;
box-sizing: border-box;
height: auto;
}
.side {
width: 19%;
height: 100%;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}应该是用flexbox才能实现吧？感谢！
代码请点击
展开
收起
1
条回答
写回答
写回答
-
IT从业楼上是正确的，给.side设置高度。
从评论里，我知道题主的意思，所以就给.bigbanner和.side设置个父元素，那么高度也会撑起来。就不用设置固定的高度啦，保持弹性哦。<main> <img class="bigbanner" > <div class="side"> <img > <img > <img > </div> </main>2019-07-17 19:34:54赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
