如何在切换幻灯片菜单旁放置div？

我一直在学习一些HTML，CSS，Java和jQuery几个月，我刚刚遇到了这个问题，我已经解决了它，但现在我最真实的卡住了！我在容器中有一些div，它包含一个下拉菜单。我希望主文本框位于菜单的右侧。我试图漂浮：对，但它在那里，但不会并排。这可能是一个非常愚蠢的问题，但我想我会问而不是没有帮助。对不起，我是一个 '的n00b' ......也对不起，如果我的代码写的不好之类的东西：/如何在切换幻灯片菜单旁放置div？

这里是我的代码：

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

对不起的不懂事，但我想大家都开始的地方......

来源

2013-02-28 Charlie Evans

你可以这样来做：

#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的绝对定位你已经在你的代码使用。

检查fiddle这里

来源

2013-02-28 21:36:42 benzonico

如何在切换幻灯片菜单旁放置div？

回答

相关问题