如何使溢出块运行良好（）

Question

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

• 如果我使用 padding：10px 为 sideblock .inner 创建“border”它不起作用（padding-bottom看起来像是消失了）
• 如果我把光标放在块上 - 它不能出现在顶部，并且不要移动othes块

块如何运作良好？ 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/

支持

Answer 1

嗯，我认为你想要看起来像div一样徘徊但是更小？你不应该在它自己的第一个div上使用任何溢出，它应该响应你给定的高度

检查元素时，您可以轻松查看元素的高度。 您会看到.style-menu div的高度与.sideblock的高度不同，以确定您可以在样式菜单中添加继承高度：

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

现在，当你进一步观察时，你会发现.inner div元素处的填充消耗了实际给定的高度。你想要的是填充内联。您可以使用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