itsbrian 發表於 10-9-14 17:40:45

關於切版的問題

有關於切版的一些問題
我已經在知識家上已經有po了
http://tw.knowledge.yahoo.com/question/question?qid=1010091402280
可是還沒人回答
因為還蠻急的 可以請各位幫忙嗎
還有我也做了另外一個版(在下面的程式碼)
不過這個好像不能自行調整寬度
我原本想要作一個可以應映各個瀏覽器跟螢幕可以自行調整的版
所以以上 希望各位幫我看一下
到底該怎麼作
哪裡需要怎麼改??
謝謝


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
<!--
#wrapper {
        width: 950px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
}
#wrapper #container {
        width: 100%;
        padding: 0px;
        background-color: #F0F;
        height: 100%;
        float: left;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: -100px;
        margin-left: 0px;
}
#wrapper #container #left {
        float: left;
        width: 180px;
        background-color: #00F;
        margin: 10px;
}
#wrapper #container #main {
        float: left;
        width: 550px;
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
        color: #F00;
        background-color: #F00;
}
#wrapper #container #right {
        float: right;
        width: 180px;
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        background-color: #FF0;
}
#wrapper #footer {
        clear: both;
        height: 100px;
        margin: 0px;
        padding: 0px;
        width: 100%;
        background-color: #FF0;
}
#wrapper #header {
        width: 950px;
        background-color: #CCC;
        height: 60px;
}
#wrapper #btn {
        height: 80px;
        background-color: #0F0;
}
-->
</style>
</head>

<body>
<div id="wrapper">
  <div id="header"> id "header" 的內容放在這裡</div>
  <div id="btn"> id "btn" 的內容放在這裡</div>
  <div id="container">
    <div id="left">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div id="main">
      <p>id "main" 的內容放在這裡</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div id="right">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="footer">
    <p>id "footer" 的內容放在這裡</p>
    <p>&nbsp;</p>
  </div>
</div>
</body>
</html>


西風漂流 發表於 10-11-1 17:07:05

想要可以隨瀏覽器調整大小
wrapper的width應該設為100%
頁: [1]
檢視完整版本: 關於切版的問題