css - 如何调整div的位置

Question

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

hidden {
  display: none
}

和按钮的onClick我想显示 div 演示，其内容加载 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

希望这是您正在寻找的：-

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";
});

Answer 2

用 CSS 修改？

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

Answer 3

这是小提琴

将样式添加到您的搜索 div。IE

制作<div id='search'>

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

然后这将使您的演示位于搜索 div 的右侧

Answer 4

这里的例子

我相信这就是你想要完成的。 The $('#requesttype').on('change')方法也可以用$('button').on('click')方法替换。请让我知道，如果你有任何问题。