2011-12-11 126 views
0

我想獲得div的一些實踐學習。我從錶轉換網站的div和填充它之前我擺出網站這是我的小提琴。將網站表格轉換爲div

http://jsfiddle.net/DAM7K/

基本上我想要的東西,每當我膨脹或收縮,做網站保持居中一個瀏覽器窗口(非常基本)。我無法使right_boxbody_box內聯。我試圖用我的CSS top:left:position:absolute放置right_box但是當我決定使用<div align="center">整個佈局(以保持它的所有中心),該right_box顯然沒有關於留在原地的其他元素。

我知道這是一個非常基本的問題,我只是在困惑自己。任何幫助都會很棒。謝謝!

回答

2

下面是我認爲你試圖做的一個簡單的例子。

HTML:

<div class="wrapper"> 
    <div class="content"></div> 
    <div class="sidebar"></div>  
</div> 

CSS:

.wrapper{width:400px; height:500px; margin:0 auto; background:lightgray;} 
.content{width:200px; float:left; height:200px; background:salmon;} 
.sidebar{width:200px; float:left; height:500px; background:lightblue;} 

Demo

這裏就是你們的榜樣,fixed

#body_box{ 
    ... 
    width:750px; 
    border:1px solid black; 
    float:left; 
    } 

#right_box{ 
    width:246px; /* Not 250px because your borders add another 4px */ 
    border:1px solid black; 
    float:left; 
    } 
+0

好吧是啊。我其實也嘗試添加position:absolute和float:left到body_box,然後定位:absolute和float:right_box右側,這也起作用。我想長話短說我需要更好地學習花車!謝謝! – MillerMedia

+0

浮動'#right_box'右邊也有效,但'position:absolute;'在這種情況下不是必需的。 – bookcasey

+0

是的。是的,我剛剛意識到這是一個錯誤(我有其他代碼在那裏)。基本上浮動:左邊和右邊浮動:右邊對我很好。 – MillerMedia

1

請參閱http://jsfiddle.net/DAM7K/10/並參見下面的註釋說明。

#CompleteLayout{ 
    width:1000px; 
    height:1100px; 
    border:1px solid black; 
    margin: 0 auto; /* this centers it */ 
    overflow: auto; /* this clears the floats I added */ 
    } 

#header{ 
    height:207px; 
    width:998px; /* this needed to downsize for border */ 
    border:1px solid blue; 
    } 

#top_image{ 
    width:998px; /* this needed to downsize for border */ 
    height:167px; 
    border:1px dotted #993300; 
    } 

#navbar{ 
    width:998px; /* this needed to downsize for border */ 
    height:40px; 
    border:1px dotted #990000; 
    } 

#slideshow{ 
    width:998px; /* this needed to downsize for border */ 
    height:200px; 
    border:1px dotted #990000; 
    } 

#body_box{ 
    height:686px; 
    width:750px; 
    border:1px solid black; 
    float: left; /* added this to get right_box to sit beside */ 
    } 

#right_box{ 
    height:686px; 
    width:246px; /* this needed to downsize for borders of this and body_box */ 
    border:1px solid black; 
    float: left; /* added this to get right_box to sit beside */ 
    }