HTML / CSS创建可扩展字段

Question

我正在尝试使用angular 1.5和bootstrap创建以下内容：

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

有人可以建议一种方法来构建这个设计。提前谢谢。

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;