Question

我不确定我是否可以按照我的方式使用花车。如果我做错了，请不要感谢任何建议。

注意

我计划在完成布局以及元数据的竞争等后将内部样式表迁移到外部样式表

<!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标签出现在属性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>

Answer 1

您的HTML无效，请检查此 - ＆gt; http://validator.w3.org/

我的建议：尝试为布局目的构建更通用的嵌套标记。你有非常具体的标记，这没有错，但在很长一段路上，你会遇到浮动问题，特别是有交叉浏览器问题。我认为在更通用的标记上很少使用浮点数。这是一个简单的两列布局的示例。有了这个你可以删除：

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

Answer 2

使用浮动的方式没有什么特别的错误。我唯一的建议是开始给浮动元素赋予宽度。

如果您能更好地了解您遇到的任何问题或您遇到的具体问题，我可以为您提供更多帮助。

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

2 个答案: