如何在切換幻燈片菜單旁放置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？

回答

相關問題