Question

我最近遇到过这样的代码，它使用了一种我以前从未使用过的方法来在页面上放置3列。我在下面的GROUP 2代码中包含了这个方法。我使用GROUP 1自己完成相同的任务。现在我知道写CSS和HTML这样的标记，就像编程一样，主要取决于程序员 - 提供的效率等不是一个因素。但在这种情况下，你们认为第1组与第2组的利弊是什么？

例如，由于GROUP 2使用负边距技术，如果＃Left2 div位于＃Middle2和＃Right2之前，它将落在#Header2后面，甚至在页面上都不可见。就个人而言，我认为GROUP 2方法较弱且不太稳健，因为一些浏览器可能因为负边距而无法正确定位div。那么，你们觉得怎么样？

第2组代码的作者显然在Zoe Mickley Gillenwater的一本书中使用它，称为灵活网页设计创建液体和弹性布局与CSS。 所以我想知道第2组的编码是不好的做法，为什么它在设计书中呢？如果这不是不好的做法，为什么不呢？

<html>
    <head>
        <title>Layout Test</title>
        <link rel="Stylesheet" href="style.css" type="text/css" />
    </head>

    <body>
        <div id="Header1">GROUP 1</div>

        <div id="Left1">
            Left
        </div>

        <div id="Middle1">
            Middle
            <br />
            Middle
            <br />
            Middle
            <br />
            Middle
            <br />
            Middle
        </div>
        <div id="Right1">
            Right
        </div>

        <br class="Clear" />

        <div id="Footer1">Footer</div>

        <br /><br /><br />

        <div id="Header2">GROUP 2</div>



        <div id="Wrapper">
            <div id="Middle2">
                Middle
                <br />
                Middle
                <br />
                Middle
                <br />
                Middle
                <br />
                Middle
            </div>

        </div>
        <div id="Right2">
            Right
        </div>
        <div id="Left2">
            Left
        </div>

        <br class="Clear" />

        <div id="Footer2">Footer</div>

    </body>
</html>

CSS：

body { background-color: Gray; }

#Header1 { background-color: Lime; }

#Left1 { background-color: Fuchsia; width: 25%; float: left; }

#Middle1 { background-color: Orange; width: 50%; float: left; }

#Right1 { background-color: Purple; width: 25%; float: left; }

#Footer1 { background-color: Yellow; }



.Clear { clear: both; }


#Header2 { background-color: Lime; }

#Left2 { background-color: Fuchsia; width: 25%; float: left; margin-left: -100%; }

#Middle2 { background-color: Orange; margin: 0 25%; }

#Right2 { background-color: Purple; width: 25%; float: left; margin-left: -25%; }

#Footer2 { background-color: Yellow; }

#Wrapper { width: 100%; float: left; }

最后它们看起来都一样：

enter image description here

Answer 1

我认为使用此表单的问题，将直接影响网站导航如果你在标题上冲浪，它可以跳到预期的对面如果我没有目睹使用此浏览器视觉障碍

Answer 2

我投票给第1组。:)根据您的插图，您尝试在页面中创建一个三列。所以最好的方法是使用float：left;在左边部分和浮动：右边;在右边。对于三列来说，这总是很好的做法。使用负数（ - ）来实现它是一种非常糟糕的做法，并且是一个非常大的NO。

Answer 3

第1组是要走的路。

恕我直言，负边距虽然可能，但更多的是黑客攻击你的布局做你想做的事情，而不是第一次实际产生预期的效果。这里的主要问题是不同的浏览器（以及相同浏览器的不同版本 - 是的，我正在与你交谈IE !!! ）往往表现得越疯狂，你就越难以进行布局。

此外，如果您试图让它对更广泛的受众群体有用，您应该考虑到当今现实中的行为和解析限制：移动设备。我打赌他们中的一些人会对这种类型的编码进行抨击。

所以，根据我的经验，我会反对它。

你会使用以下哪种CSS方法？

3 个答案: