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

我的目标:

这是我要完成的工作。我们有页面上显示的类别列表。类别数未知。描述几乎可以是任何大小...但是我们想要统一的外观。因此，我们使用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略微扩展以显示全部内容。没有其他项目移动或受影响。

注意:抱歉，大小不一。我已尽力减少了。另外，我正在修改一个现有的Intranet网站...这是第三方，所以我对源代码的控制有限-因此表的使用受到限制。 :(

我尝试/研究的内容:

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

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

我对CSS的了解不足，无法使其正常工作。如果需要，我不反对使用jQuery做更多的事情。

我确实在使用:hover东西来处理大多数悬停的版本上工作，但是它的效果不如jQuery方法。

最佳答案

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

我之前遇到过这个问题，这就是我解决的方法。它基本上依靠html嵌套的div结构来实现内容的可扩展性，而不影响near元素的 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-->

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

.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 */
}

注意:无论内容的height小于父容器的height，都会发生这种效果。如果您使用边框和阴影(可能会在父容器内显示为较小的框)，则可能不太喜欢该效果，因此我们可以向.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