CSS - 显示动态高度浮动DIV - 缺少背景图像(CSS - displaying a dynamic height floated DIV - missing background image)

 我的目标： 
 
 这是我想要完成的。 我们有一个显示在页面上的类别列表。 类别数量未知。 描述可以是几乎任何尺寸......但我们想要一个统一的外观。 所以，我们使用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与红线重叠。 没有其他项目移动或受到影响。 
 
 
 注意：抱歉的东西大小。 我尽可能地减少了它。 此外，我正在修改现有的Intranet网站......它是第三方，所以我对源代码的控制有限 - 因此表的用法。 :( 
 
 我尝试/研究的内容： 
 
 我认为问题源于我的sccontainer项目是浮动的，并且没有指定高度。 这就是图像消失的原因。 
 
 我有一个保留背景的版本......但是sccontainer框没有像我们需要的那样重新调整......文本刚刚溢出来......相当难看。 
 
 我不知道足够的CSS来使这一切正常。 如果需要，我并不反对使用jQuery做更多事情。 
 
 我确实使用了一个处理大部分悬停的版本：使用：hover stuff ...但它的效果不如jQuery方法。 

My Goal:
 
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
 
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
 
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
 
Some pertinent 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:
 
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
 
http://jsfiddle.net/ztMM5/1/
 
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
 
 
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :( 
 
What I've Tried/Researched:
 
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
 
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
 
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
 
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.

原文：https://stackoverflow.com/questions/21465064