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

Question

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

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

问题在于我没有空间显示left div中的所有信息，因为在这种情况下我的middle div会变得太小，因此用户体验会受到负面影响：包装也不是一种选择，因为left div中的信息变得混乱。

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

我目前停留在right div布局中，这种​​情况正在失控......这是我提出的最接近的结果：http://jsfiddle.net/KLXPL/11/

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

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

P.S。当我写这篇文章的时候，我想我已经提出了另外一个解决方案。 Middle div将以固定大小排列到右侧（就像现在一样）。 200px应该有左边距？设置为left div 2，宽度设置为100％，向右对齐。 middle div没有必要:%s/test_block/test_div/g " every line :10,20s/test_block/test_div/g " lines 10 to 20 ，因为:%s/test_block/test_div/gc 正在使用屏幕（不是另一个div）左边框的左边距...所以.. Haven没有尝试任何那个。但即使我尝试过 - 我的css是最差的:)

Answer 1

你不需要JQuery来实现这一点。

以下是您更新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都在彼此之上，正如所希望的那样。

这里是小提琴：https://jsfiddle.net/daveRexter/syah6soc/7/

var reg = /^(?:https?:\/\/\w+\.\w+\/)?\w+\.\w+\?\w+\=\w+$/;
var url1 = 'http://example.com/gmt.php?a=1';
var url2 = 'http://example.com/ac.php';
var url3 = 'gmt.php?a=1';
var url4 = 'gmt.php'
    console.log(reg.test(url1));
    console.log(reg.test(url2));
    console.log(reg.test(url3));
    console.log(reg.test(url4));

CSS代码：

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

希望这能解决问题。