Question

我有两个div搜索和演示。而div demo是

hidden {
  display: none
}

按钮的

和 onClick 我想显示div demo，其内容加载onClick事件。虽然div demo出现在搜索div的右边。我希望它低于搜索div。

这是我的代码：

<div id= search>
    <div class="recruitment_input">
        <span style="margin-top:6px;">Search<sup>&nbsp;</sup>:</span> 
        <select id="requesttype" class="select_option">
            <option value="none">--Select Search--</option>
            <option value="design">Department</option>
            <option value="development">First Name</option>
            <option value="other">Employee ID</option>
        </select>
    </div>
</div>
<div id=demo></div>

Answer 1

这是Fiddle

为搜索div添加样式。即。

制作<div id='search'>

为<div id='search' style='float:left'>

然后，这会将演示放在搜索div的右侧

Answer 2

<强> EXAMPLE HERE

我相信这是你想要完成的。 The $('#requesttype').on('change')方法也可以替换为$('button').on('click')方法。如果您有任何问题，请与我们联系。

Answer 3

使用CSS修改？

<style type="text/css">
div#demo {
position: absolute;`
margin-left:50%;
left:-200px;
width:400px;
height: 400px;
background-color: green;
}
</style>

Answer 4

希望这是你想要的： -

<强> HTML

<button id="show">Show</button><br/><br/>
        <div id= search>
        <div class="recruitment_input">
        <span style="margin-top:6px;">Search<sup>&nbsp;</sup>:</span> 
        <select id="requesttype" class="select_option">
        <option value="none">--Select Search--</option>
        <option value="design">Department</option>
        <option value="development">First Name</option>
        <option value="other">Employee ID</option>
        </select>
        </div></div>
<div class="clear"></div><!--clear class will show your demo div down, even you have used any floating above-->
        <div id='demo'>your demo box</div>

<强> CSS

#demo{display: none;}
.clear{clear:both;}

<强>使用Javascript：

    $("#show").click(function(){
    document.getElementById("demo").style.display = "block";
});

如何调整div的位置

4 个答案: