0

编辑：我修改了我的代码，我知道在左上角有想要的效果，但现在我的内容容器没有自动向下延伸（有黑色背景。JSFIDDLE2

我一直在尝试在 div 上添加一个悬停标签，但它似乎被剪掉了，我已经尝试了几个小时让它工作但没有成功。父级设置为相对，子级是绝对的，但是每当我将子容器设置为溢出：自动时，它就会被剪裁。这是 js 小提琴，所以你可以看到我在说什么（左上角的 TEST123）小提琴。我还需要右侧容器中的内容来自动增长父 div。我试图让左上角的去核器说 TEST123 看起来像“传输”示例在此处输入图像描述：我尝试的结果是在将文本放置在父 div 之上时没有切断文本

HTML

    <div class="contentcontainer">
        <div class="labels">Test 123</div> 

<div id="instructors">PlaceHOlder</div>
<div id="ccleft">
 <h1 class="orange">Sample</h1>
                        <ul id="instructorbullets">
                            <li>1st Degree Blackbelt</li>
                            <li>Criminal Justice Major</li>
                            <li>Proud Dad of A.J.</li>
                        </ul>
                        <p class="normal"> lorem ipsum </p>
</div>
<div id="ccright"><div id="ccrightcontainter"><div id="ccrightcontaintertext"><h1 class="blue">About The Instructor</h1><p class="normal"> foo bar baz <br /><br />Lorem baz<br /><br />More text</p></div></div></div>
</div>

CSS

 .clear { clear: both:}

    #.labels {
 position: absolute;
 left: -15px;
 top: -15px;
 padding: 10px 10px;
 height: 35px;
 background: #0FF;
 color: #d94a3c;
 font-family: font1;
 font-size: 2.0em;
 z-index: 1;
 clear: both;
}
 #.contentcontainer {
 position: relative;
 margin: 0 auto;
 width: 940px;
 background: #fff;
 padding-top: 20px;
 padding-bottom:20px;
 overflow:auto;
 clear:both
}
#ccleft {
    position: relative;
    margin-left: 15px;
    width: 350px;
    float: left;
    clear: both;
}
#ccright {
    position: relative;
    padding-left: 5px;
    width: 570px;
    float: left;
}
#ccrightcontainter {
    position: relative;
    width: 550px;
    background: #eaeaea;
    border-radius: 5px;
    clear: both
}
#ccrightcontaintertext {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    max-width: 500px;
    clear: both
}
4

1 回答 1

1

刚刚分叉了你的小提琴，向你展示了一个解决方法。基本上我把所有东西都包装在一个外层内容容器中。标签 div 现在绝对定位为 outerContentContainer 的直接子级。然后，您可以将溢出：隐藏添加到您的 contentContainer。

似乎有点 hack 但溢出：hidden 或 auto 会剪辑您的内容，但您需要它才能根据子 div 自动扩展

Js 小提琴位于http://jsfiddle.net/a3TvU/2/

<div class="outerContentContainer">
<div class="labels">Test 123</div> 
<div class="contentcontainer">

而CSS是

.labels {
    position: absolute;
    top:-30px;
    left:-30px;
    padding: 10px 10px;
    height: 35px; 
    background: #0FF;
    color: #d94a3c;
    font-family: font1; 
    font-size: 2.0em;
    z-index: 1;
    clear: both;

}

.contentcontainer { 
    position: relative;
    margin: 0 auto;
    width: 940px;
    color: #fff;
    background: #000;
    padding-top: 20px;
    padding-bottom:20px;
    overflow:hidden;
}
.outerContentContainer{
    position:relative;
}

翅膀

于 2013-07-26T08:42:00.183 回答