jquery - 在彼此之上显示 2 个 div，而一个依赖于其他 div

Question

我需要在页面上有 3 个 div:

左(固定大小)|中间(所有可用空间) |右(固定大小)

问题是我没有足够的空间来显示left div中的所有信息，因为那样的话我的middle div会变得太小，所以用户体验将受到负面影响 :) 包装也不是一种选择，因为 left div 中的信息变得困惑。

所以我想到了在 left div 的顶部再显示一个 div 的解决方案。我们将其命名为 left div 2，样式为 overflow: hidden;。使用 jQuery 当用户将鼠标悬停在它上面时，我将扩展 left div 2 的大小。理论上 - middle div 的大小将保持不变。 当焦点丢失在 left div 2 上时 - 它的大小将会消失恢复正常!

我目前陷入了失控的 CSS 布局...这是我得出的最接近的结果:http://jsfiddle.net/KLXPL/11/

现在，我想请您协助完成这项任务!当然，如果有更好的方法来完成这项任务，我也乐于接受建议..

这是我想要实现的目标的图像。请原谅我的绘画技巧。

附言在我写这篇文章的时候，我想我又想出了一个解决方案。 right div 将以固定大小对齐到右侧(就像现在一样)。 Middle div 应该有左边距吗？设置为 200px，宽度为 100%，右对齐。 left div 2 不是必需的，因为 middle div 使用的是 screen 左边框的左间距(不是另一个 div)...所以.. 还没有尝试过。但即使我尝试过 - 我的 css 是最糟糕的 :)

Answer 1

你不需要 JQuery 来实现这个。

这是您更新的原始 fiddle http://jsfiddle.net/DIRTY_SMITH/KLXPL/12/

这是一个仅使用 CSS 的示例 https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/12/

HTML 示例:

<div class="div1">
  <h1>Some text that should not break</h1>
  <p>Some text that should not break to new line</p>
</div>
<div class="div2">

</div>
<div class="div3">

</div>

CSS 示例:

.div1,
.div2,
.div3 {
  float: left;
}

.div1,
.div3 {
  width: 150px;
  height: 600px;
}

.div1 {
  background-color: yellow;
  position: absolute; // to place on top
  z-index: 2;// to place on top
  white-space: nowrap;// to keep from wrapping
  overflow: hidden //to not show overflow
}

.div1:hover {
  width: 550px;
}

.div2 {
  width: calc(100% - 300px);//sets 100% of remaining width
  height: 600px;
  background-color: green;
  margin-left: 150px;//Since div1 has absolute position and z-index of 2, 
                     //this sets the div to apear next to div 1
}

.div3 {
  background-color: red;
}