HTML/CSS 创建可扩展字段 [关闭]

Question

我正在尝试使用 angular 1.5 和引导程序创建以下内容：

1. 蓝色框在单击时会展开/缩回。
2. 红色、黄色、棕色框包含各自的文本段落。
3. 当蓝色框被收回时，它将显示文本的长度直到包含框的宽度（黄色、棕色和红色框）
4. 蓝框展开时，会以红、黄、棕框显示全文。蓝色框的最大高度 = 显示全文所需的最高红色/黄色/棕色框

有人可以建议一种构建此设计的方法吗？提前致谢。

Answer 1

这是你想要的吗：我使用悬停而不是点击。

div {
  box-sizing: border-box;
}

.blue {
  display: inline-block;
  overflow: visible;
  height: 1.2em;
  max-height: 1.2em;
  border: 1px solid blue;
}

.red {
  display: block;
  float: left;
  overflow: hidden;
  border: 1px solid red;
  width: 150px;
  height: 100%;
}

.green {
  display: block;
  float: left;
  overflow: hidden;
  border: 1px solid green;
  width: 100px;
  height: 100%;
}

.blue:hover {
  display: table;
  overflow: hidden;
}

.blue:hover .green {
  display: table-cell;
  vertical-align: top;
  float:none;
}

.blue:hover .red {
  display: table-cell;
  vertical-align: top;
  float:none;
}

<div class="blue">
<div class="green">Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.</div>
<div class="red">Join them; it only takes a minute:</div>
</div>