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

Question

我需要在页面上显示 3 divs:

left (fixed size) | middle (all available space) | right (fixed size)

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

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

我目前卡在 CSS 布局上，它正在失控...这是我得出的最接近的结果：http://jsfiddle.net/KLXPL/11/

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

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

P.S。在我写这篇文章的时候，我想我又想出了一个解决方案。 right div 将以固定大小向右对齐（就像现在一样）。 Middle div 应该有左边距？设置为 200px，宽度为 100%，右对齐。 left div 2 不是必需的，因为 middle div 使用 屏幕左边框的左间距 （不是另一个 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;
}

Answer 2

所以，@Adam Buchanan Smith，解决了 css 布局的问题。但是正如我注意到的那样，您希望在左侧有两个 div，一个在另一个之上，但其中只有一个依赖于其他 div 的大小。

所以根据@Adam 给出的内容，这是正确的解决方案。 div left 是固定大小，它不会在悬停时放大，但只有 left2（包含长文本）在悬停时会调整大小。然而，两个 div 都在彼此之上，正如所希望的那样。

这里是fiddle：https://jsfiddle.net/daveRexter/syah6soc/7/

<header>
<div class="left-side"> <!-- div for whole left section -->
<div class="left">LEFT div</div>
<div class="left2">
<p>
  my very long text which should be hidden with overflow
</p>
</div>
</div>
<div class="center">CENTER div</div>
<div class="right">RIGHT div</div>
</header>

CSS代码：

body {
margin: 0px;
}

header {
color: white;
text-align: center;
width: 100%;
background-color: #2995f3;
}

.center {
 width: calc(100% - 400px);
 background: green;
 margin-left: 200px;
 float: left;
 }
 .left {
 float: left;
 background: red;
 position: absolute;
 width: 200px;
 }
.left2 {
float: left;
position: absolute;
width: 200px;
overflow: hidden; // to hide the overflow of long text
}
p{background-color: red; white-space: nowrap;}
.left2:hover{width: calc(100% - 200px);}
.right {
float: left;
background: red;
width: 200px;
}

希望这能解决问题。

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

Display 2 divs on top of each other, while one is dependant on others divs

html

css

jquery

overflow