Question

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

我一直试图在div上添加一个悬停标签，但它似乎被剪掉了，我已经尝试了几个小时让它工作没有成功。父级设置为相对，子级是绝对的，但每当我将子容器设置为overflow：auto时，它就会被剪切。这是js小提琴，所以你可以看到我在说什么（左上角的TEST123）Fiddle。我还需要右侧容器中的内容来自动生成父div。我试图让左上角的核心工作者说TEST123看起来像“传输”示例： enter image description here ;我的尝试结果是在将文本放在父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
}

Answer 1

刚刚分开你的小提示，向你展示一个解决方法。基本上我把所有内容都包装在outerContentContainer中。标签div现在绝对定位为outerContentContainer的直接子节点。然后，您可以将overflow：hidden添加到contentContainer。

看起来有点像黑客但溢出：隐藏或自动会剪辑你的内容，但你需要它以便根据子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;
}

永

绝对分数被削减负边际

1 个答案: