Css 如何使溢流块正常工作（）

下面是8个内容相同的浮动块，其中有一些问题：

• 如果我使用padding:10px作为侧块。inner来创建“border”，效果不好（在底部填充，看起来像是不显示的）
• 如果我把光标放在块上-它不能出现在顶部，并且不要移动其他块

如何使区块运行良好？ HTML:

这是我的密码-

---

Thx支持

我想你想要的是与div悬停时相同的外观，但更小？
你不应该在div上使用任何溢出。首先，它应该响应你给定的高度

当你检查你的元素时，你可以很容易地看到元素的高度。 您将看到您的

.style菜单

div与

.sideblock

的高度不同，要解决此问题，您可以向样式菜单添加继承高度：

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

现在，当您进一步查看时，您会发现

.inner

div元素的填充扩展了实际给定的高度。您想要的是填充是内联的。你可以轻松地用它来做这件事。最后，您可以通过添加

溢出来“剪切”文本：

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


我希望这就是你的意思

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


更新

因此，为了让每个花费的元素忽略其他元素，您应该将其从文档流中删除。您可以使用
position:absolute。然而，绝对位置确实忽略了所有其他元素，但您希望拥有相同的位置。因为元素没有偏移位置（上、右、下、左），所以它将被放置在屏幕的左角（就像它是DOM中唯一的元素一样）
为了保持元素的位置，我们不会更改
.sideblock
，而是更改其内容<代码>样式菜单
：

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

因为这个元素位于另一个元素之上，所以需要在这里添加阴影

现在，
.sideblock
元素没有内容，因为内容已成为绝对内容，因此超出了文档流。要解决此问题，您可以为该元素指定一个
min height
：

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

看起来好多了。非常感谢。但我必须在块的顶部显示内容。我在问题中添加了图片来描述这一点。雅虎！工作很简单：）我现在就开始实施您的解决方案。非常感谢你！
.sideblock:hover .style-menu
{
    box-shadow:  0px 0px 5px #000;
    position: absolute;
}

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