在網站上溢出

-1

當我使我的網站與div標籤不是表格，這是大多數人做的，然後我定位它們的邊界屬性，我已經試過它的位置：絕對和相對屬性，但是當我重新調整我的瀏覽器的一切變化的地方，像這樣 - enter image description here 在網站上溢出

我希望它留在原地它是像大多數網站使用div標籤，當你重新調整大小他們不動，我想知道什麼把戲，他們用...

，並順便說一下我的網站仍在進行中笑...謝謝你

我的代碼

<html> 
<head> 
<title></title> 
<link rel = "stylesheet" type = "text/css" href = "verdanacssstylesheet.css" /> 
<script type="text/javascript" src="external files/jquery.js"></script> 
<!-----------START OF SCRIPT------------------------> 
<script type = "text/javascript" > 

</script> 
<!------------END OF SCRIPT AND START OF STYLE--> 
<style type = "text/css" > 
div {border:2px solid black;} 

</style> 
<!---------------END OF STYLE AND HEAD AND START OF BODY----------> 
</head> 

<body style="margin:0px;padding:0px;" text="black" > 
<div style="" > 
<div id = "header" style="100%;height:150px;" > 
<div id = "headerinside" style="margin-left:auto;margin-right:auto;width:1030px;height:150px;" ><div></div></div> 
</div> 
<div style="width:1030px;height:;margin-left:auto;margin-right:auto" > 

<div style = "border:2px solid red;height:30px;" id = "navigationbar" > 
<ul style = "list-style:none;" id = "navbar" > 
<li style = "float:left;padding-left:45px;line-height:3px;" >hello</li> 
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li> 
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li> 
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li> 
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li> 
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li> 
</ul> 
</div> 

<div id = "main" style=""> 
<div style="width:1026px;text-align:center;" ><p>hello</p></div> 
</div> 
<div id = "footer" style="100%;height:150px;" > 
<div id = "footerinside" style="margin-left:auto;margin-right:auto;width:1030px;;height:150px;" ><div></div></div> 
</div> 
</div> 
</body> 
<!---------------EDN OF BODY-------------------> 
</html>

來源

2011-06-24 fgdf

顯示您當前的代碼將有助於... – kei

好吧，我忘了這麼做，感謝您告訴我 – fgdf

您仍然可以編輯您的帖子並添加代碼。 – Bazzz

div s是塊元素，這意味着它們會自動擴展以填充其包含元素的寬度。如果您不希望它們使用瀏覽器窗口進行擴展，則應考慮將它們包含在包含div的顯式寬度中，或者爲每個div設置顯式寬度。

這是我最好的基於你的模擬的猜測;如果你的jsfiddle例如張貼一些代碼，你可能會得到更具體的答案:)

[更新]

我有點清理你的代碼。我不認爲所有的div都有匹配的開始和結束標籤，但很難說。

我已經從內聯樣式中刪除了您的CSS。除了使代碼難以閱讀之外，還有很多重複，這也意味着更改不一定顯示出來，因爲它們在其他聲明中被覆蓋。

我修改後的版本的關鍵是<div id="wrapper">。你會看到相應的樣式，#wrapper設置爲500px寬，並居中水平。

下面是我的更新jsfiddle。

來源

2011-06-24 17:43:14 Kalessin

好的，我發佈了一個代碼 – fgdf

@ R01：好的我發佈了更新:) – Kalessin

確保您的網站仍處於頁面中心的標準結構將沿着這些路線展開。

<div id="wrapper"> 
    <div class="header"> 
     <h1>My Site</h1> 
    </div> 
    <div class="content"> 
     <p>My Content</p> 
    </div> 
</div>

它給你一個包裝和一個頁眉和頁腳。實現此目的的CSS爲：

#wrapper { margin: 0 auto; width: 960px; } 
.header, .footer { float: left; }

只要用戶調整窗口大小，就會將頁面對齊頁面中心。在你牢牢掌握css box模型之前，絕對定位的使用應該是有限的（在我看來）。使用浮動很好，很容易生成最簡單的佈局。

來源

2011-06-24 17:48:43

好的我已經發布了一個代碼 – fgdf

試試這個代碼好友，看看它是如何工作的。

<html> 
<head> 
<title>My Title</title> 
<link rel= "stylesheet" type = "text/css" href = "style.css" /> 
<script type="text/javascript" src="files/jquery.js"></script> 
<style type="text/css"> 
    #wrapper { margin: 0 auto; width: 960px; } 
    .menu, .header, .footer, .content { float: left; width: 100%; } 
    .menu ul{ float: left;} 
    .menu li{ float: left; padding: 0 50px ;} 

    .header{ background: #F1F1F1;} 
    .content{ background: #E1E1E1;} 
    .menu{ background: #D1D1D1;} 
    .footer{ background: #C1C1C1;} 
</style> 
</head> 

<body> 
    <div id="wrapper"> 
    <div class="header"> 
     <h1>My Site</h1> 
    </div> 
    <div class="menu"> 
    <ul> 
     <li><a href="">Menu 1</a></li> 
     <li><a href="">Menu 2</a></li> 
     <li><a href="">Menu 3</a></li> 
     <li><a href="">Menu 4</a></li> 
     <li><a href="">Menu 5</a></li> 
     <li><a href="">Menu 6</a></li> 
    </ul> 
    </div> 
    <div class="content"> 
     <p>My Content</p> 
    </div> 
    <div class="footer"> 
    <p>My footer</p>   
    </div> 
</div> 
</body> 
</html>

這樣可以避免使用「內聯」樣式，如果可以避免的話，它們有點「不行」。它允許您同時定位多個元素以應用樣式。你可以看到，上面的結構很好，整潔，並給你一個960px寬的網站，它仍然在用戶屏幕的中心。應該避免在頂部（邊框：2px純黑色）的樣式之一，因爲最終會出現2個邊框和4個邊框的混亂情況，其中2個div坐在彼此的旁邊或頂部。

希望有所幫助。

來源

2011-06-24 18:06:06

在網站上溢出

回答

相關問題