0

这是 8 个内容相同但存在一些问题的浮动块：

  • 如果我使用padding:10px为sideblock .inner创建“边框”它不起作用（填充底部看起来像消失了）
  • 如果我将光标放在块上 - 它不能出现在顶部，并且不要移动其他块

如何使块工作良好？HTML：

<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>

CSS：

.sideblock {
    width: 220px;
    height: 80px;
    overflow: hidden;
    margin: 10px;
    float: left;    
}

.sideblock .inner {
    background: #ffffff;
    padding: 10px;}

.sideblock .style-menu {
    padding: 3px;
    background: #157ba1;
    background: linear-gradient(to right,  #157ba1 0%,#5fa31c 100%);}

.sideblock:hover {
    box-shadow:  0px 0px 5px #000;
    overflow: visible;
    height: auto;}

这是我的代码 - http://jsfiddle.net/2HqZV/1/

会怎样

谢谢支持

4

1 回答 1

1

好吧，我假设您希望具有与 div 悬停但随后更小的外观相同的外观？
你不应该首先在它自己的 div 上使用任何溢出，它应该响应你给定的高度。

当你检查你的元素时，你可以很容易地看到你的元素的高度。您会看到您的.style-menudiv 与 的高度不同.sideblock，要解决此问题，您可以向样式菜单添加继承高度：

.sideblock .style-menu {
     height: inherit;
    padding: 3px;
    background: #157ba1;
    background: linear-gradient(to right,  #157ba1 0%,#5fa31c 100%);
}

现在，当您进一步观察时，您会发现.innerdiv 元素处的填充超出了实际给定的高度。你想要的是内联的填充。您可以使用box-sizing轻松做到这一点。最后，您可以通过添加以下内容来“剪切”文本overflow：

.sideblock .inner {
    background: #ffffff;
    padding: 10px;
    height: inherit;
    box-sizing: border-box;
    overflow: hidden;
}

jsFiddle

我希望这就是你的意思。

顺便说一句，我发现你添加边框的方式非常独特^^

更新

因此，要让每个扩展的元素都忽略其他所有元素，您应该将其从文档流中取出。您可以使用position: absolute;. 然而，绝对位置确实忽略了所有其他元素，但您希望拥有相同的位置。因为元素没有偏移定位（上、右、下、左），它将被放置在屏幕的左角（就像它是 DOM 中的唯一元素）。
为了保持元素的位置，我们不会改变.sideblock它的内容；.style-menu：

.sideblock:hover .style-menu
{
    box-shadow:  0px 0px 5px #000;
    position: absolute;
}

因为这个元素在另一个之上，所以你想在这里添加阴影。

现在该.sideblock元素没有内容了，因为内容已经变得绝对，因此超出了文档流。要解决这个问题，你可以给这个元素一个min-height：

.sideblock:hover 
{
    min-height: 80px;
    height: auto;
}

jsFiddle

于 2013-10-25T14:57:21.683 回答