-1

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

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

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

它们最后看起来都一样：

在此处输入图像描述

4

3 回答 3

0

我认为使用这种形式的问题，将直接影响网站导航如果您正在浏览标题它可以跳转到预期的对面如果我没有看到使用此浏览器的视障人士

于 2013-04-26T09:58:45.443 回答
0

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

于 2013-04-26T09:59:28.293 回答
0

第1组是要走的路。

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

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

因此，根据我的经验，我建议不要这样做。

于 2013-04-26T10:16:25.700 回答