我不确定我是否可以按照我的方式使用 float 。如果我做错了，请多多指教。
注意
我计划在完成布局以及元数据的竞争等后将内部样式表迁移到外部样式表
<!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 标 checkout 现在属性信息 div 标签下方的问题，但是我不确定它是否正确。
<!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>
最佳答案
您的 HTML 无效，请检查 -> http://validator.w3.org/
我的建议: 尝试为布局目的构建更通用的嵌套标记。你有非常具体的标记，这没错，但从长远来看，你会遇到很多 float 问题，尤其是跨浏览器问题。我认为在更通用的标记上很少使用 float 是个好主意。这是一个简单的两列布局的示例。有了这个你可以删除:
<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;
}
关于css - 这是使用多个 CSS float 的正确方法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7167089/