簡單的CSS編輯

我有一個簡單的查詢，我無法得到我的頭。我有一個圖像放在我的'nav'div中，它包含一個紅色的&白色盒子。我在'nav'div之後創建了一個'內容'div，我的內容將會去，但它不匹配前一個div中圖片的長度。請參閱this link以獲得更清晰的圖片。簡單的CSS編輯

<body> 
<div id="wrap"> 

    <div id="header"> 
     <!-- LOGO GOES HERE --> 
    </div> 

    <div id="nav"> 
     <img src="images/nav.png" width="1076" height="99" /> 
    </div> 

    <div id="content"> 
     HOW DO I ALIGN THIS DIV TO MATCH THE LENGTH OF THE WHITE BOX ABOVE? 
    </div> 

</div><!--End of wrap -->

body { 
    background-color:#d3d1d1; 
    margin:0 auto; 
} 

#wrap { 
    width:1076px; 
    margin:auto; 
} 

#content { 
    background-color:white; 

}

來源

2013-05-30 Jahed Hussain

..給它與'.nav'相同的大小＃ – Kermit

在新'div＃main'中包裝'＃nav'和'＃content'，並賦予它所有的對齊屬性。 – Sourabh

在#content添加以下屬性：

width: 1029px (I find it looks better than 1028px, but you can try both) 
margin-left: 22px

這將使#content盒大小相同的圖像的白色空間，它會對齊它們，使它們都從左側的相同點開始。

來源

2013-05-30 23:29:25

我認爲這將失敗的窗口調整大小 – Sourabh

同意，雖然現在的網站沒有被編碼響應（即圖像也有一個固定的寬度）。如果他們希望將其設置爲可調整大小，則最好在「導航」和「內容」中的圖像上使用％代替寬度，而不是px。 –

-1

更改您的＃內容的CSS：

#content { 
    background-color: white; 
    margin-left: 22px; 
    width: 1028px; 
}

這是如何工作的：頁邊距設置對齊內容框的左側。寬度將增加，直到它與圖像中的白色框匹配。

編輯刪除不必要的左側定位在評論中指出

來源

2013-05-30 23:22:40 Fallexe

爲什麼不在左邊*和*右邊添加一個邊距......這種方法與相對定位過於複雜。 –

我通常使用SCSS，我喜歡將寬度作爲變量存儲，我可以使用它來幫助確定子元素的寬度。所以，個人喜好。 – Fallexe

放在#content以下規則：

margin: 0 25px 0 22px;

它仍然看起來會比較難看，雖然因爲你的形象有一個參差不齊的軟邊緣正確的。你可以用邊框補償這一點：

#content { 
    margin: 0 25px 0 22px; 
    border-right: 1px solid #eee; 
}

來源

2013-05-30 23:22:59

最好的主意 - 從圖像中刪除空白，然後使整個事情變白。使用邊距添加頂部邊距，左側，右側和居中內容：0 auto;

來源

2013-05-30 23:30:33 Ani

您的意思是頂部「填充」。而id是'nav'，所以這個空格可能是暫時的。 – Sourabh

對不起，是的！謝謝Saurabh – Ani

但是，如果使用背景白色輕鬆添加並相應地進行調整，則使用圖像添加空白區域是沒有意義的。 – Ani

看起來您的圖像並非真正居中。那些粗俗的小點兒是不均勻的。所以，這是第一個可能會引起我的回答的問題。

#content { 
    margin: 0 auto; /* this centers the div | 0 margin top/bottom auto on sides */ 
    width: 100%; 
    max-width: 1030px; /* this needs to be the exact width of your white thing in photoshop */ 
}

這就是簡單的答案......但是它需要你的photoshop圖像是對稱的。

來源

2013-05-30 23:45:44 nouveau

簡單的CSS編輯

回答

相關問題