Question

我有一个按钮，在点击它时，会出现一个隐藏在其下方的div。我的问题是div不能在大屏幕和小屏幕上缩放。隐藏的div应该在图像的正下方，但它会向右和向左散射。

这是我的HTML

<div class="col-lg-4">
    <div id="cel-screen"> <a href="javascript:void(0)" onclick="showhide()" id="colorbt"><img src="images/colors.png" height="50" width="100" /></a>
      <div id="color-lib-1">
        <div class="row" style="margin: 5px 0 5px 0;">BASIC</div>
        <div class="col-sm-12" style="text-align:center !important;">
        <div class="pick col-sm-4" style="background-color:rgb(150, 0, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 0, 152);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 151, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 0, 5);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 255, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 255, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 0, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 150, 0);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(255, 0, 150);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 255, 150);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(150, 0, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        <div class="pick col-sm-4" style="background-color:rgb(0, 150, 255);" onclick="hello(this.style.backgroundColor,1);"></div>
        </div>
        <div class="col-sm-12"><a href="javascript:void(0)" onclick="call5()"><img src="images/previous.png" width="20" height="20" /></a>&nbsp;More Colors&nbsp;<a href="javascript:void(0)" onclick="call2()"><img src="images/next.png" width="20" height="20" /></a></div>
      </div>
</div>

这是我的CSS

#cel-screen {height:50px; position:relative; float:right;}
#colorbt {position:relative; bottom:0; right:0; margin:10px;}
#color-lib-1 {background-color:white;width:165px; height:300px; top:55px; display:none;border:1px solid black;position:absolute;}

这是我的Javascript

function showhide() {
    if (pressed == 0){
        document.getElementById('color-lib-1').style.display = "block";
        pressed = 1;
    } else if (pressed==1){
        if (document.getElementById('color-lib-1').style.display == "none"){
            document.getElementById('color-lib-1').style.display = "block";
        } else {
            document.getElementById('color-lib-1').style.display = "none";
        }
    }
}

MORE COLORS 也应出现在div的底部。任何帮助将非常感激。请参阅附图。

您可以在here检查实时网站。

Answer 1

#color-lib-1 {
background-color: white;
width: 165px;
height: auto;
top: 55px;
display: none;
border: 1px solid black;
position: absolute;
left: 50%;
margin-left: -85px;
}

我刚刚添加了左：50％;和margin-left：-85px;它会对你有用。

Answer 2

尝试从＃color-lib-x元素中删除“position：absolute”，然后添加5或10像素的margin-top。这应该将color-lib-x元素置于图像下方。

Answer 3

如果您希望颜色选择器框显示在#colorbtn链接下方。你应该使用

#cel-screen{
    display:inline-block;
}
#colorbt{
    margin:0px;
}

#cel-screen on display:block getting full width of parent element

#cel-screen on display:inline-block getting only child element width + margin: 10px

我希望这个答案可以帮到你。

根据我的需要，Div没有正确定位

3 个答案: