2

我最近尝试了展开和折叠的 div。一切都很完美。这是我的小提琴，每当我增加 div 的字体大小时，我使用展开和折叠按钮固定栏，然后按钮不会按比例与 div 一起出现。这是我所期望的小提琴。 http://jsfiddle.net/vicky081/GyG3w/1/ 

   .btnn
        {
            width: auto;
            height: auto;
            cursor:pointer;
            background-color:#02adea;
            position: absolute;
            border:solid;
            margin-left:3%;
            border-color:#ffffff;
            border-top-color:#02adea;
            top:36px;
            text-align: center;
            padding-top: 7px;
            color:white;
        }

您可以看到该按钮位于 div 之外。即使我更改字体大小，是否有办法显示附加到 div 的按钮。

任何建议都会很棒。

谢谢。

4

3 回答 3

1

无论字体大小如何，按钮的top值100%都始终粘在容器上。

现场观看http://jsfiddle.net/LeBen/UCTgR/（我还添加了 CSS Normalize）

于 2013-08-30T14:23:04.497 回答
1 
$(document).ready(function () {
$(".text").hide();
$(".btn").click(function(e){
    var txt=$(this).html(); 
    var flag = txt==="open";
    if(flag){
      $(".text").show();
      $(this).html("close");
    }
    else{
      $(".text").hide();
      $(this).html("open");
    }        
});

});

.banner{
font-size:1.2em; 
position:fixed;
width:100%;   
}
.text {
background:#02adea;
text-align:center;
width:100%; 
}
.btn{
background:#02adea;
border:5px solid white;
border-top-color: #02adea;
color:white;
text-align:center;
width:2em;
}

http://jsfiddle.net/GyG3w/5/

我想这就是你想要的效果，在这里你可以根据需要更改固定 div 的字体大小，其余元素将相应调整大小并保留布局

于 2013-08-30T15:13:33.817 回答
0

您可以使用bottom: -49px;而不是top: 36px;

于 2013-08-30T14:24:35.643 回答