CSS向右浮动然后向上?

我想知道是否有什么方法可以实现浮动(左或右),使每一个新的开始从边框开始在它上面的元素下面。这是三个元素。

#red-block {
  background-color: red;
  width: 70vw;
  height: 15vh;
}
#blue-block {
  background-color: blue;
  width: 20vw;
  height: 45vh;
}
#green-block {
  background-color: green;
  width: 60vw;
  height: 15vh;
}
div {
  float: right;
}
<div id="red-block">
  red-block
</div>
<div id="blue-block">
  blue-block
</div>
<div id="green-block">
  green-block
</div>

在本例中,绿色块从蓝色块的垂直端之后的右端开始。有没有什么方法可以让它从红色块的底部开始呢?

谢谢,我想知道是否有办法让绿色块从红色块的底部开始?

解决方案:

尝试使用flex。

HTML:

<div id="main-block">
  <div id="blue-block">

  </div>

  <div>

    <div id="red-block">

    </div>
    <div id="green-block">

    </div>
  </div>

</div>

CSS:

#main-block{
  display: flex;
  justify-content: flex-end;
}
#red-block {
  background-color: red;
  width: 70vw;
  height: 15vh;
}
#second-block{
  height: 30vh;
  width: 70vh;
}
#blue-block {
  background-color: blue;
  width: 20vw;
  height: 45vh;
}
#green-block {
  background-color: green;
  width: 60vw;
  height: 15vh;
}

给TA打赏
共{{data.count}}人
人已打赏
未分类

数据类型名称与varialble名称相同,这在Java中是如何工作的?

2022-9-9 3:07:22

未分类

键盘处理 swiftui

2022-9-9 3:18:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索