javascript - CSS - 显示动态高度 float DIV - 缺少背景图片

Question

我的目标:

这就是我想要完成的。我们有一个出现在页面上的类别列表。类别数量未知。描述几乎可以是任何尺寸……但我们想要统一的外观。因此，我们使用 dotdotdot 插件在段落上添加省略号。当您将鼠标悬停在元素上时，它应该展开描述并显示全文。

我希望悬停 float 或覆盖其下方的任何内容。由于我的某些布局元素(请参阅下面的注释)，我的 sccontainer 元素没有设置高度。它是基于内容的动态...设置了最大高度。

当我在悬停事件中将该高度更改为 AUTO 时(这会导致文本向下流动并显示所有内容)，我失去了 sccontainer 元素的背景。

一些相关的 CSS:

  .sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
  .sccontainer .parent { position: absolute; width: 270px; }
  .sccontainer .image { margin: 5px; float: left; }
    .sccontainer .image img { width: 48px; }
  .sccontainer .icon { margin: 0; }
  .sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
  .sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
    .sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
  .sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
  .sccontainer a:hover { text-decoration: underline; }

.sccontainer.hover { height: 250px; }
  .sccontainer.hover .content { height: auto; }
    .sccontainer.hover .content p { min-height: 135px; max-height: none; }

jsFiddle:

这是我现在拥有的 jsFiddle 版本。如果将鼠标悬停在蓝色框中的文本上，您可以看到实际效果。它有点大，所以我使用 jsFiddle 而不是将所有位都放在这里代码标签...

http://jsfiddle.net/ztMM5/1/

这是我希望看到的模型。方法 5a 稍微扩展以显示完整内容……但与红线重叠。其他元素都没有移动或受到影响。

注意:抱歉东西太大了。我已经尽可能地减少了它。此外，我正在修改现有的内部网网站......它是第 3 方，所以我对源代码的控制有限 - 因此表的使用。 :(

我尝试过/研究过的内容:

我认为问题源于我的 sccontainer 元素是 float 的，并且没有指定高度。这就是图像消失的原因。

我有一个保留背景的版本......但是 sccontainer 框没有按照我们需要的那样调整大小......文本只是溢出了它......相当丑陋。

我对 CSS 的了解不够，无法让这一切正常进行。如果需要，我并不反对使用 jQuery 来做更多事情。

我确实开发了一个使用 :hover 东西处理大部分悬停的版本...但它的工作效果不如 jQuery 方法。

Answer 1

这个答案可能无法解决您的具体问题，但它可能会帮助其他有类似情况的人(在大多数情况下，使用表格很难呈现干净的布局。)

我以前遇到过这个问题，这就是我解决它的方法。它基本上依赖于一个html嵌套的div结构来实现内容的可扩展性而不影响附近元素的 float 布局:

<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->

    <div class="sccontainer"><!--position relative-->
        <div class="inner"><!--position absolute-->
            <div class="content"><!--position relative-->
                <!-- my content here -->
            </div>
        </div> 
    </div>
    <!-- more containers etc-->

</div><!--END wrapper-->

首先，我们将对 #wrapper 容器应用臭名昭著的 clear-fix hack(使用您喜欢的方法):

.cf:after {
    visibility:hidden;
    display:block;
    content:"";
    clear:both;
    height:0
}
* html .cf {
    zoom:1
}
/* IE6 */
 *:first-child+html .cf {
    zoom:1
}

然后是 .sccontainer 容器的样式:

.sccontainer {
    width: 280px; /* or whatever - could be % for responsiveness */
    padding-bottom:200px; /* any value to give height without using height ;) */
    position: relative;
    float: left;
    margin: 5px 10px; /* or whatever */
    overflow: hidden; /* this is important to keep all same height and big content out of sight */
    z-index: 1; /* this is important too, see later */
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}

然后是 .inner 容器，如果我们 hover 元素，它实际上有助于保持布局有序

.inner {
    position: absolute; /* please don't move */
    width: 100%; /* to fill the whole parent container */
    height: 100%; /* same */
}

和内容:

.content {
    position: relative;
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
    width: 100%; /* helps to fill the gaps with small content */
    height: 100%; /* same, specially if using image backgrounds */
    /* other styles, etc */
}

注意:我们应该对三个容器应用相同的border-radius 属性，并将box-shadow 应用到.sccontainer 和 .content 以保持一致性

现在，当我们hover 时会发生什么？

.sccontainer:hover {
    overflow: visible; /* show the full content */
    z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}

.sccontainer:hover .content {
    height: auto; /* as it really is, including background image */
}

注意:无论内容的高度是否小于父容器的高度，都会发生这种效果。如果您使用边框和阴影(可以在父容器内显示为较小的框)，您可能不喜欢这种效果，因此我们可以向 .sccontainer 添加一个额外的类，例如

<div class="sccontainer withhover">

只有当该类存在时才应用 hover 效果

.sccontainer.withhover:hover {
    overflow: visible;
    z-index: 999;
}

...并使用一些 jQuery 删除该类以获得较短的内容，因此它不会受到影响:

jQuery(document).ready(function ($) {
    $(".sccontainer").hover(function () {
        var $contentHeight = $(this).find(".content").height();
        if ($(this).innerHeight() > $contentHeight) {
            $(this).removeClass("withhover");
        }
    });
});

参见 JSFIDDLE