css - flexbox布局问题？
本文介绍了css - 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才能实现吧？感谢！
解决方案
楼上是正确的，给.side设置高度。
从评论里，我知道题主的意思，所以就给.bigbanner和.side设置个父元素，那么高度也会撑起来。就不用设置固定的高度啦，保持弹性哦。
<main>
<img class="bigbanner" >
<div class="side">
<img >
<img >
<img >
</div>
</main>顺便放个链接：http://blog.lwxyfer.com/flex-zhi-nan/
这篇关于css - flexbox布局问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
