Question

我的目标：

这是我想要完成的事情。我们有一个显示在页面上的类别列表。类别数量未知。描述可以是几乎任何尺寸......但我们想要一个统一的外观。所以，我们使用dotdotdot插件将椭圆放在段落上。将鼠标悬停在项目上时，应展开说明并显示全文。

我希望悬停浮动或覆盖其下方的任何内容。由于我的一些布局项目（请参阅下面的注释），我的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略微扩展以显示完整内容.... yets与红线重叠。没有其他项目移动或受到影响。

mockup of service catalog

注意：对不起。我尽可能地减少了它。此外，我正在修改现有的Intranet网站...它是第三方，所以我对源代码的控制有限 - 因此表的用法。 :(

我尝试/研究的内容：

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

我有一个保留背景的版本......但是sccontainer框没有像我们需要的那样调整大小...文本只是溢出来了......相当难看。

我不知道足够的CSS来使这一切正常。如果需要，我不会使用jQuery做更多的事情。

我确实使用了一个处理大部分悬停的版本：hover stuff ...但它的效果不如jQuery方法。

Answer 1

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

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

<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 黑客应用于#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

CSS - 显示动态高度浮动DIV - 缺少背景图像

1 个答案: