這是使用多個CSS浮動的正確方法嗎？

我不確定我是否可以按照我的方式使用花車。如果我錯誤地完成了任何提示，請多多包涵。這是使用多個CSS浮動的正確方法嗎？

注意

我打算在內部樣式表遷移到外部樣式表一旦我已經完成了佈局，以及元數據的賽區等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta http-equiv="Content-Language" content="en-us" /> 

     <meta name="keywords" content="" /> 
     <meta name="description" content="" /> 
     <meta name="author" content="" /> 

     <link rel="icon" type="image/png" href="" /> 
     <link rel="stylesheet" type="text/css" media="all" href="" /> 

     <style type="text/css" media="all"> 

      * { 
       margin: 0px; 
       padding: 0px; 
      } 

      body { 
       font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
       font-size: 1em; 
       font-style: normal; 
       font-weight: normal; 
       color: #000000; 
      } 


      #wrapper { 
       width: 600px; 
       margin: 0px auto; 
      } 

      #propertydesc { 
       background-color: #e5e8ed; 
       padding: 10px; 
      } 

      #content { 
       float: left; 
      } 

      #propertyinfo { 
       float: right; 
      } 

      .cls { 
       clear: both; 
      } 

      #agent { 
       float: right; 
      } 

     </style> 

     <title>Sample Template</title> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div id="logo"><img src="logo.png" width="100" height="157" /></div> 
      <div id="propertydesc">property description</div> 
      <div id="hero">hero</div> 
      <div id="content"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> 
      <div id="propertyinfo">property info</div> 
      <div class="cls"></div> 
      <div id="agent">agent</div> 
      <div class="cls"></div> 
      <div class="contact">contact</div> 
    </body> 
</html>

編輯

我更新了我的代碼，以幫助解決代理div標籤出現在屬性信息div標籤下方的問題，但我不確定它是否合作rrect。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta http-equiv="Content-Language" content="en-us" /> 

     <meta name="keywords" content="" /> 
     <meta name="description" content="" /> 
     <meta name="author" content="" /> 

     <link rel="icon" type="image/png" href="" /> 
     <link rel="stylesheet" type="text/css" media="all" href="" /> 

     <style type="text/css" media="all"> 

      * { 
       margin: 0px; 
       padding: 0px; 
      } 

      body { 
       font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
       font-size: 1em; 
       font-style: normal; 
       font-weight: normal; 
       color: #000000; 
      } 


      #wrapper { 
       width: 600px; 
       margin: 0px auto; 
      } 

      #propertydesc { 
       background-color: #e5e8ed; 
       padding: 10px; 
      } 

      #content { 
       float: left; 
       width: 200px; 
      } 

      p { 
       margin-top: 10px; 
       margin-bottom: 10px; 
      } 

      #propertyinfo { 
       /* float: right; */ 
       margin-left: 400px; 
       background-color: #e5e8ed; 
       width: 200px; 
      } 

      #agent { 
       float: right; 
       background-color: #e5e8ed; 
       width: 200px; 
      } 

      .cls { 
       clear: both; 
      } 


     </style> 

     <title>Sample Template</title> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div id="logo"><img src="logo.png" width="100" height="157" /></div> 
      <div id="propertydesc">property description</div> 
      <div id="hero">hero</div> 
      <div id="content"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
      </div> 
      <div id="propertyinfo">property info</div> 
      <div id="agent">agent</div> 
      <div class="cls"></div> 
      <div class="contact">contact</div> 
    </body> 
</html>

來源

2011-08-23 PeanutsMonkey

似乎沒什麼問題，你有任何具體問題？ –

沒有什麼特別錯。在這種情況下浮動#agent是無用的。你也可以在#content和#propertyinfo上使用float：left。瀏覽器會將它們並排放置。另一種方法是給#propertyinfo一個等於內容寬度的餘量。這樣你就不必明確指定元素的寬度（主要用於流體設計） – Gerben

@paulGraffix＆Gerben - 請參閱我對Skylar的評論 – PeanutsMonkey

你的HTML是無效的，請在此 - >http://validator.w3.org/

我的建議：嘗試建立較爲一般，嵌套標記佈局的目的。你有非常具體的標記，這是沒有錯，但很長一段時間，你會遇到很多與花車問題，特別是與crossbrowser問題。我認爲使用浮動很少使用更通用的標記是一個好主意。這是一個簡單的雙列布局的例子。有了這個，你可以刪除：

<div class="cls"></div>

並避免交叉瀏覽器問題（較舊的IE）。

由於嵌套標記不佳，會發生許多問題。

HTML

<div class="two-col"> 
    <div class="first-col"> 
     // your specific markup goes here 
    </div> 
    <div class="second-col"> 
     // your specific markup goes here 
    </div> 
</div>

CSS

.two-col, 
.second-col { 
    overflow: hidden; /* enclose the float, so .second-col dont need any margin */ 
    zoom: 1; /* hasLayout IE */ 
} 
.first-col { 
    float: left; 
}

來源

2011-08-23 22:20:16 mkubasch

你使用浮動的方式沒有什麼特別的錯誤。我唯一的建議是開始給你的浮動元素寬度。

如果您可以更多地瞭解您遇到的任何問題或您遇到的具體問題，我可以爲您提供更多幫助。

來源

2011-08-23 20:28:56

我遇到的一個問題是當我在'content div'中放置更多內容時。我想'代理div'直接出現在'property info' div – PeanutsMonkey

下面請看我的修改代碼和我遇到的問題。 – PeanutsMonkey

這是使用多個CSS浮動的正確方法嗎？

回答

相關問題