这是使用多个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浮动的正确方法吗？

回答

相关问题