这是使用多个CSS浮动的正确方法吗？_Css_Css Float

这是使用多个CSS浮动的正确方法吗？

css

这是使用多个CSS浮动的正确方法吗？,css,css-float,Css,Css 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"> <h

我不确定我是否能以我现有的方式使用浮动。如果我做得不对，请给我任何建议

注意

我计划在完成布局和元数据的比较等工作后，将内部样式表迁移到外部样式表

<!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>


* {
边际：0px；
填充：0px；
}
身体{
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
字号：1em；
字体风格：普通；
字体大小：正常；
颜色：#000000；
}
#包装纸{
宽度：600px；
保证金：0px自动；
}
#房地产{
背景色：#e5e8ed；
填充：10px；
}
#内容{
浮动：左；
}
#物业资讯{
浮动：对；
}
.cls{
明确：两者皆有；
}
#代理人{
浮动：对；
}
样本模板
属性描述
英雄
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本
财产信息
代理人
接触

编辑

我更新了代码，以帮助克服代理div标记出现在property info 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>


* {
边际：0px；
填充：0px；
}
身体{
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
字号：1em；
字体风格：普通；
字体大小：正常；
颜色：#000000；
}
#包装纸{
宽度：600px；
保证金：0px自动；
}
#房地产{
背景色：#e5e8ed；
填充：10px；
}
#内容{
浮动：左；
宽度：200px；
}
p{
边缘顶部：10px；
边缘底部：10px；
}
#物业资讯{
/*浮动：对*/
左边距：400px；
背景色：#e5e8ed；
宽度：200px；
}
#代理人{
浮动：对；
背景色：#e5e8ed；
宽度：200px；
}
.cls{
明确：两者皆有；
}
样本模板
属性描述
英雄
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本
财产信息
代理人
接触

使用浮动的方式没有什么特别的问题。我唯一的建议是开始为浮动元素提供宽度

如果您可以就您看到的任何问题或您遇到的特定问题进行更多的讨论，我可以为您提供更多帮助。

您的HTML无效，请检查此->

我的建议是：尝试为布局目的构建更通用的嵌套标记。您有非常具体的标记，这并没有错，但在很长的一段时间内，您将遇到许多与浮动有关的问题，尤其是交叉浏览器问题。我认为在更通用的标记上很少使用浮动是个好主意。下面是一个简单的两列布局示例。使用此选项，您可以删除：

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

我觉得很好，你有什么特别的问题吗？没有什么特别的问题。不过，在这种情况下，浮动代理是毫无用处的。您还可以在内容和属性信息上使用float:left。浏览器会将它们并排浮动。另一种方法是只给#propertyinfo留一个等于内容宽度的边距。通过这种方式，您不必明确指定元素的宽度（在流体设计中非常有用）@paulGraffix&Gerben-请参见下面我的评论以了解更多信息Skylar@paulGraffix&Gerben-编辑我的代码以反映我遇到的问题我遇到的一个问题是当我在

content div

中放置更多内容时。我希望

代理div

显示在

属性信息

div的正下方

<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>

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