主页 / 问题 / 771954
Accepted
Alex
Asked:2020-01-17 20:03:18 +0000 UTC2020-01-17 20:03:18 +0000 UTC

根据另一个块的高度更改块的宽度

  • 772

你好。告诉我如何制作这样的布局，其中块的宽度取决于另一个的高度： 在此处输入图像描述

即如果块 1 的高度小于块 2 的高度，则块 3 是全宽的，否则块 3 与块 2 具有相同的宽度，块 1 只是向下（如在正常的 2 列设计中）

请提出一个CSS解决方案。

javascript

1 个回答

  1. Best Answer

    CSS 变体。“block 1”的高度影响宽度（block 2,3）的显示 

    .b1 {
  z-index: 1;
  position: relative;
  background-color: #0000ff;
  width: 30%;
  float: left;
  height: 30px
}

.b2 DIV {
  position: relative;
  overflow: hidden;
  background-color: #ff0000
}

.b3 DIV {
  position: relative;
  overflow: hidden;
  background-color: #00ff00
}
       <div class="b1">блок 1</div>
<div class="b2">
  <div>блок 2</div>
</div>
<div class="b3">
  <div>блок 3</div>
</div>

    • 1

相关问题