您会使用以下哪种 CSS 方法？答案

【问题标题】：Which of these CSS methods would you use?您会使用以下哪种 CSS 方法？
【发布时间】：2013-04-26 09:48:42
【问题描述】：

我最近遇到了这段代码，它使用一种我以前从未使用过的方式来定位页面上的 3 列。我在下面的 GROUP 2 代码中包含了这个方法。我自己使用 GROUP 1 来完成同样的任务。现在我知道编写诸如 CSS 和 HTML 之类的标记，就像编程一样，主要取决于程序员——只要效率等不是一个因素。但是在这种情况下，你们认为 GROUP 1 与 GROUP 2 的优缺点是什么？

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

第 2 组代码的作者显然使用了 Zoe Mickley Gillenwater 的一本书，名为 Flexible Web Design Creating Liquid and Elastic Layouts with CSS。 所以我想知道 GROUP 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; }

它们最后看起来都一样：

【问题讨论】：

标签： css html stylesheet

【解决方案1】：

我认为使用这种形式的问题，会直接影响网站导航如果您正在浏览标题，它可以跳到预期位置的另一侧如果我误认为没有目击者使用此浏览器作为视障者

【讨论】：

您指的是第 2 组，对吧？奇怪的是，GROUP 2 代码的作者显然使用了 Zoe Mickley Gillenwater 的一本书，名为 Flexible Web Design Creating Liquid and Elastic Layouts with CSS。所以我想知道这段代码是否是不好的做法，为什么这段代码在设计书中？如果这不是坏习惯，为什么不呢？
其他做同样事情的方法，并不意味着它们是最好的......你可以把div放在右边，页眉在页脚使用负数来“调整”，但这并不意味着这是最好的方式，但方式不同。考虑到维护，这将是一个带有负对齐的奇怪布局。当我想实际反转项目的位置时，我使用负调整，但仅在列表和列中而不是在布局中

【解决方案2】：

第 1 组是要走的路。

恕我直言，负边距虽然可能，但更多地是在hack您的布局以执行您想要的操作，而不是第一次实际产生预期效果。这里的主要问题是，不同的浏览器（以及同一浏览器的不同版本 - 是的，我在跟你说话 IE ！！！）往往表现得越疯狂。 p>

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

所以，根据我的经验，我建议不要这样做。

【讨论】：

非常感谢。我完全同意你的看法:-)

【解决方案3】：

我投票给第 1 组。:) 根据您的说明，您尝试在页面中创建三列。所以最好的方法是使用 float:left;在左侧和浮动：右；在右侧。这始终是三列的良好做法。使用negative(-) 来实现它是一种非常糟糕的做法，并且是一个非常大的NO。

【讨论】：

感谢您的回复。我只是复制我刚刚对上一个“答案”所做的评论：关于这件事的奇怪之处在于，第 2 组代码的作者显然使用了 Zoe Mickley Gillenwater 的一本书，名为 Flexible Web Design Creating Liquid and Elastic Layouts与 CSS。所以我想知道这段代码是否是不好的做法，为什么这段代码在设计书中？如果这不是坏习惯，为什么不呢？
作者是在哪一章从书中得到这个想法的。我想自己搜索看看。
显然是第4章。我自己没有读过这本书，但有电子书版本。我只是对它进行了搜索。查看第 113 页。
嗯..我明白了..我现在明白他的观点了。但我仍然不能说服这样做。如果我正在做 3 列，我作为一名网络开发人员，我使用 float:left;到左侧然后浮动：右；在右侧。对于中间我使用 float:left;只需添加边距即可在左侧进行调整。我没有在做网络时使用否定（-），因为当您更改浏览器和不同的屏幕分辨率时它会变得很讨厌。但在移动设备上使用它是另一回事。我不知道它是如何在那里工作的。 :)
太好了，非常感谢。我也不喜欢消极的方法（并且从未使用过它们）。我会以与您几乎相同的方式进行操作（请参阅第 1 组 div，我写了这些）。但是你为什么要对 Right div 使用“float:right”呢？为什么不使用我在第 1 组中的解决方案中的所有 'float: left'。它们最终会相同，但只是好奇...... :)