[英]How do I put a div next to a toggle slide menu?
我几个月来一直在学习一些HTML,CSS,Java和jQuery,而我刚刚遇到了这个问题,过去我已经解决了这个问题,但是现在我真的很坚持! 我在容器中有一些div,其中包括一个下拉菜单。 我希望主文本框位于菜单的右侧。 我试过了float:right,但是它在那上面,但是没有并排。 这可能是一个非常愚蠢的问题,但我想我会问而不是没有帮助。 很抱歉成为'n00b'...如果我的代码写得不好或类似的东西,也很抱歉:/
这是我的代码:
<html>
<head>
<link type='text/css' rel='stylesheet' href='stylesheet.css'/>
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
$("#panel2").slideToggle("slow");
$("#panel3").slideToggle("slow");
});
});
<div id="container">
<div id="header"><img src="logo.jpg" style="float:left" width="100">Bourne Computing Solutions<img src="logo.jpg" style="float:right" width="100"></div>
<div id="flip">Menu (click to open)</div>
<div id="panel">Home</div>
<div id="panel2">Contents Page</div>
<div id="panel3">Find us</div>
<div id="textbox">TEXT HERE</div>
</div>
</body>
</html>
我的样式表:
#container
{
position:absolute;
left:50%;
width:1024px;
height:100%;
margin-left:-512px;
}
#header
{
font-family:arial;
font-size:32px;
padding:10px;
width:1002px;
height:50px;
text-align:center;
background-color:#ffffff;
border:solid 1px #000000;
}
#panel,#flip, #panel2, #panel3
{
font-family:arial;
padding:15px;
width:200px;
text-align:center;
background-color:#ffffff;
border:solid 1px #000000;
}
#panel
{
padding:10px;
width:210px;
display:none;
}
#panel2
{
padding:10px;
width:210px;
display:none;
}
#panel3
{
padding:10px;
width:210px;
display:none;
}
#textbox
{
font-family:arial;
font-size:14px;
padding:10px;
width:770px;
height:500px;
text-align:left;
background-color:#ffffff;
border:solid 1px #000000;
float:right;
}
对不起,我很傻,但是我想我们都从某个地方开始...
您可以这样操作:
#textbox
{
font-family:arial;
font-size:14px;
padding:10px;
width:770px;
height:500px;
text-align:left;
background-color:red;
border:solid 1px #000000;
position:absolute;
left:210px;
top:72px;
}
使用您已经在代码中使用的CSS的绝对位置。
在这里检查小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.