flexbox布局问题? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

flexbox布局问题?

2016-06-12 18:17:43 1968 1

如图,想让右边的三副小图按照上中下的位置排布,而不想像这样靠上挤在一起。

screenshot

<!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)
  • 杨冬芳
    2019-07-17 19:34:54

    楼上是正确的,给.side设置高度。
    从评论里,我知道题主的意思,所以就给.bigbanner和.side设置个父元素,那么高度也会撑起来。就不用设置固定的高度啦,保持弹性哦。

    <main>
        <img class="bigbanner" >
        <div class="side">
          <img >
          <img >
          <img >
        </div>
    </main>

    顺便放个链接:http://blog.lwxyfer.com/flex-zhi-nan/

    0 0
相关问答

0

回答

CSS左右布局浮动高度问题

2022-10-22 23:46:58 41浏览量 回答数 0

1

回答

Flexbox布局中的flexWrap属性是什么?

2022-09-10 16:32:38 242浏览量 回答数 1

1

回答

Flexbox布局有什么作用呢?

2022-09-10 16:25:20 241浏览量 回答数 1

1

回答

Flexbox布局中的alignItems 是什么?有什么作用吗?

2022-09-10 16:28:13 242浏览量 回答数 1

1

回答

Boolstrap中什么能够生成布局?

2022-03-28 21:27:25 128浏览量 回答数 1

1

回答

这个怎么布局

2016-06-22 18:23:18 1338浏览量 回答数 1

1

回答

布局的问题?

2016-06-02 13:47:35 1643浏览量 回答数 1

1

回答

一个盒子模型的最好的布局方式

2016-05-27 13:47:00 1860浏览量 回答数 1

1

回答

布局、盒模型问题

2016-03-26 11:29:34 1758浏览量 回答数 1

1

回答

为什么使用DocumentFragment就不会重新布局?

2016-03-16 10:44:24 1696浏览量 回答数 1
+关注
杨冬芳
IT从业
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载