Div頁面設計在其他分辨率下看起來不對

我有一個75％寬度和100％高度的主div。首先，背景圖像不會一直走到最後。其次，在div裏面，我有兩個div，一個在左邊，一個在右邊。在正確的一個我主要是文本，並在較小的分辨率的文本得到的格，但它有100％的高度。我曾嘗試設置像素高度，但在不同分辨率下看起來不正確。任何解決方案Div頁面設計在其他分辨率下看起來不對

另外，左邊的div似乎在某些分辨率上面有太多的空間，但在其他分辨率下，其他分辨率則是正確的。我只是不明白我做錯了什麼。

下面是代碼的一部分。此外，我也使用了一張桌子，以便安排兩個較低的div。我知道這可能是一團糟。：d

CSS：

body { 
    height: 100%; 
    font-family: Tahoma,sans-serif; 
    background-image: url("images/pattern.jpg"); 
    color: #005200; 
    font-size: 15px; 
    text-align: left; 
} 


html { 
    background: #47B224; 
    height: 100%; 
} 

.main { 
    background: white; 
    width: 76%; 
    margin: 0; 
    padding: 10px; 
    border: 1px solid black; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -38%; 
} 

.left { 
    margin: 5px; 
    text-align: left; 
    width=135px; 
} 

.right { 
    padding: 5px; 
    float: right; 
    text-align: left; 
} 

table { 
    margin-top: 20px; 
    padding: 20px; 
    padding-top: 0px; 
}

，剩下的就是這樣的：

<body> 
<div class="main"> 
<table> 
    <td> 
     <div class="left"> 
     Content:left 
     </div> 
    </td> 
    <td> 
     <div class="right"> 
     Content:right 
     </div> 
    </td> 
</div> 
</body>

來源

2012-04-13 Adina T.

我不確定你要完成什麼，但是我把你的代碼放到JS小提琴中，讓人們更容易幫你：http://jsfiddle.net/gEXdr/。因爲標記不正確（缺少標記），所以我拉出了「表格」，這會使佈局更加困難。 – 2012-04-13 01:01:14

我認爲最好向我們展示定期和高分辨率的屏幕顯示。如果您更改分辨率，正常的佈局會改變/混亂。這是大多數人都可以接受的，除非你的情況下有人會改變決議，你想讓它爲他們工作。 – 2012-04-13 01:04:23

這是它在1024x768分辨率下的外觀。 http://img42.imageshack.us/img42/3746/1024x768t.jpg – 2012-04-13 11:44:10

jsfiddle

我做了，我覺得你描述的變化。如果你想要你的背景在整個屏幕上重複，那麼你必須告訴它重複與background-repeat: repeat;我也使這適用於html標記，而不是body標記。

這可能是由設計，但對我來說，它看起來像你想拆分主要部分成列，在這種情況下，你需要使用左列的float: left; ......再次，這只是取決於你是什麼想要並且不應該對任何事情產生影響。

個人而言，我會衡量你的目標受衆是什麼，並找出最低分辨率是多少。從這個設計到您的額外利潤，左邊我們右邊的高分辨率。

來源

2012-04-13 01:31:40 Jared

謝謝，我把背景放在HTML中，那部分工作。但是，我仍然需要將白色部分一直放下，並擺脫左側上方的空間。 http://i31.photobucket.com/albums/c377/daryne_/print.jpg另外，左右邊距在我嘗試過的每個分辨率上看起來都不錯。底部是我的問題。 – 2012-04-13 11:55:48

Div頁面設計在其他分辨率下看起來不對

回答

相關問題