在XHTML/CSS中絕對位置與浮點數的比較

我想將一個.psd轉換爲XHTML，並且我有一個菜單欄，它包含所有包裝的寬度，我迄今爲止做的是爲條和一個設置爲repeat-x的中心。在XHTML/CSS中絕對位置與浮點數的比較

例如，我有這樣的：

<div id="tagline" class="grid_16"><!-- begin tagline --> 
      <div class="left"></div> 
      <div class="center"> 
       <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2> 
      </div> 
      <div class="right"></div> 
</div><!-- end tagline --> 


#tagline {background:url(images/tagline.jpg) repeat-x top; height:96px;} 

#tagline .center {width:930px; float:left;} 
#tagline .left {background:url(images/taglineLeft.jpg) repeat-x top left; width:10px; height:96px; float:left;} 
#tagline .right {background:url(images/taglineRight.jpg) repeat-x top right; width:10px; height:96px; float:right;}

我使用浮動用於定位的目的，我的問題是，什麼是使用浮動或位置的最佳解決方案：絕對的。我問這個問題，我不想在舊瀏覽器中遇到問題。

謝謝。

來源

2009-11-06 Andrei

您可以嘗試使用背景圖片，背景重複和背景位置組嵌套DIVS。例如：

<div id="tagline"> 
    <div  style="background-image: url(images/tagline.jpg);  background-repeat: repeat-x;"> 
    <div style="background-image: url(images/taglineLeft.jpg); background-repeat: no-repeat; background-position: left;"> 
     <div style="background-image: url(images/taglineRight.jpg); background-repeat: no-repeat; background-position: right;"> 
      <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2> 
     </div> 
    </div> 
    </div> 
</div>

沒有必要的絕對位置浮動。爲了清楚起見，我已將內容樣式化。記得在最外面的DIV上設置寬度和高度。此提示受this article的啓發。

來源

2009-11-06 10:50:03

謝謝你的提示很棒，它會幫助我很多。 – Andrei 2009-11-06 11:03:55

+1嵌套背景通常比定位的裝飾元素更容易和更可靠。 – bobince 2009-11-06 11:13:38

我同意。這就是爲什麼我開始使用它們，即使標記看起來很醜陋 – 2009-11-06 11:38:21

您的代碼基本正確。 float會正常工作，但您必須將所有這些元素都浮動到左側。不要浮動最後一個權利，它不會做你認爲它的作用。

我的意思是：

#tagline .right { ... float:left;}

來源

2009-11-06 10:44:57

在XHTML/CSS中絕對位置與浮點數的比較

回答

相關問題