先上代码：点击，可预览效果预期实现： Content1与Content2两个DIV上下分布；移入bk后，显示悬停的蓝色方块功能需保持不变。问题： Content1与Content2成了左右并排。不会修改 postion 参数，并保持移入悬停功能不变。请朋友们赐教，万分感谢！

父DIV中，两个子DIV布局的问题。

Mykeyb2004

7111219

发布于
2017-06-14

先上代码：
点击，可预览效果

预期实现：

Content1与Content2两个DIV上下分布；
移入bk后，显示悬停的蓝色方块功能需保持不变。

问题：

Content1与Content2成了左右并排。
不会修改postion参数，并保持移入悬停功能不变。

请朋友们赐教，万分感谢！

css

阅读 3.3k

2 个回答

得票最新

slzll

2031918

发布于
2017-06-14

✓ 已被采纳

你把display:flex删掉

<html>

<body>
  <style type="text/css">
    .blue {
      width: 200px;
      height: 100px;
      background: #09d;
      margin: 10px;
      display: none;
      right:0px;
      top:0px;
    }
    .bk {
      width: 500px;
      height: 350px;
      background: grey;
      display: flex;
      -webkit-flex-direction: column;
         flex-direction: column;
    }
    .bk:hover .blue {
      display: block;
    }

    .content1 {
      width: 100%;
      background: #00faca;
      display: block;
      flex:1;
    }

    .content2 {
      width: 100%;
      height: 350px;
      background: #00aaca;
      display: block;
      flex:1;
    }

  </style>

  <div class="bk">
    <div class="content1">
      <p>Content2</p>
      html如何让其中一个div浮在另一个div上面，html如何让其中一个div浮在另一个div上面。
    </div>
    <div class="content2">Content2
      <div class="blue"></div>
    </div>
  </div>
</body>

</html>

感觉你布局这块比较混乱，建议使用flex就行了，看看这样是不是你想要的

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

父DIV中，两个子DIV布局的问题。

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？

tailwind css group hover的触发问题?