8

我正在尝试将此布局与两个 50% 的列宽一起使用。但似乎当右列达到其“最小宽度”时，它会位于左列下方。有什么方法可以使用“垫片”技术为包装器设置最小宽度，以便两列都停止调整大小。因此，消除了右栏在左栏下发现自己的问题。

我的页面如下。

<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
}

</style>

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
    <div class="minwidth">&nbsp;</div>
</div>

问题是左列将停止调整大小，但右列将位于左列下方并继续调整大小。基本上，我想要的效果是一旦包装器宽度变低，左右列也停止调整大小。将垫片放在左右两列中也不起作用。

是否有另一种方法可以获得两个 50% 宽度的列并使用 shim 正确设置最小宽度？

谢谢你。

编辑： minwidth 类中的空格实际上是   但它被转换了。;)

4

8 回答 8

6

我能够根据 Stu Nicholls 在 CSS Play 的技术提出一个“不需要 HTML 表格”的解决方案，我个人喜欢它，因为它不仅适用于 IE6+ 和 FF2+，它也是有效的 CSS需要任何黑客。关于为什么基于 CSS 的布局比 HTML 表格更可取的论点，请参见下文。

首先，我建议在使用 CSS 设计新页面时使用符合标准的浏览器模式。有关 quirksmode 和标准兼容模式的说明，请从我最喜欢的 CSS 资源站点之一查看这篇文章。您所要做的就是在页面顶部添加一个特定的 DOCTYPE 元素。然后，CSS 将被迫以符合标准的模式呈现，从而减少错误和浏览器特性。如果您无法切换到标准兼容模式，则可以在 quirksmode 下为浏览器提供最小宽度解决方案，也可以在 CSS Play 上找到。

其次，您必须在现有标记周围添加一个额外的包装器。这个包装器用于为理解 min-width（不是 IE）的浏览器设置 min-width。然后，您可以使用 * html 技巧专门针对 IE 6 并将 Stu Nicholl 的技术应用于内部包装器。此处详细介绍了该技术，使用的具体示例是“#2 For standards compliant mode IE”：

http://www.cssplay.co.uk/boxes/minwidth.html

最终结果相当简单。它使用原始问题中提到的2 列 ALA 样式技术创建 2 个 50% 列，这些列具有总最小宽度（在本示例中为 500 像素），其中列停止调整大小并且右列不低于左列。我希望这有帮助！

编辑：同样的技术可用于将跨浏览器兼容的最小宽度应用于任何东西。例如，列不需要每个为 50%，可以使用任意数量的列。http://www.glish.com/css/是基于 CSS 的页面布局的绝佳资源，当与这种最小宽度技术结合使用时，可以使用最少的有效 CSS 创建许多不错的布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">

        /* For browsers that understand min-width */
        .width {
            width: 100%;
            min-width: 500px;
        }

        /* IE6 Only */
        * html .minwidth {
            border-left: 500px solid white;
            position: relative;
            float: left;
        }

        /* IE6 Only */
        * html .wrapper {
            margin-left: -500px;
            position: relative;
            float: left;
        }

        .left {
            float: left;
            width: 50%;
        }

        .right {
            float: left;
        }

    </style>
</head>
<body>

<div class="width">
    <div class="minwidth">
        <div class="wrapper">
            <div class="left">
                Left
            </div>
            <div class="right">
                Right
            </div>
        </div>
    </div>
</div>

</body>
</html>

现在，我建立 Stack Overflow 帐户的动机是能够响应下面的建议“如果你想要两列，使用一个表格，而不是试图强迫 Div 表现得像一个表格”。由于我太新，无法发表评论或投反对票，因此我正在扩大这个讨论。

真的吗？

有人问了一个关于基于 CSS 的布局的问题，你的回答是告诉他们使用 HTML 表格？

首先让我说我不认为 HTML 表格是完全没有必要的。事实上，任何时候我需要显示表格数据，即关系数据，我都会使用 HTML 表格。尚不完全支持 CSS 表格显示属性（即将在 IE8 中推出！），使用单级HTML 表格是一种有效的解决方案。查看任何 Google 网页的标记，您会发现他们会同意。

作为一个花费大量时间编写跨浏览器兼容的基于 CSS 的布局的人，而他们本可以使用表格在 10 分钟内完成，我同意这个问题有一个更简单的解决方案。然而，仅仅因为你可以使用炸药来翻新你的厨房，并不意味着你应该这样做。下面的文章详细解释了为什么基于 CSS 的布局更受欢迎。

http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/

于 2008-10-23T15:21:12.377 回答
1

试试这个风格：

.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }
于 2008-10-10T14:20:38.480 回答
1

只需为包装器设置一个最小宽度，然后将左右列更改为百分比。这将防止您的两列被推入/上方/下方。

于 2008-10-10T14:21:46.577 回答
1

这是一个快速的尝试，但它有效（仅在 Firefox 中测试）：

<head>
<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    min-width: 500px;
    background:#eee;
    height: 0;
    overflow:visible;
}
.col{
    min-width:250px;
    background:#eaa;
}

</style>
</head>
<body>
<div id="wrapper" class="minwidth">
    <div id="left" class="col">
        left
    </div>
    <div id="right" class="col">
        right
    </div>
    <div><!-- Not needed --></div>
</div>
</body>
于 2008-10-10T14:22:57.040 回答
1

试试这个：

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">

.floatme {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
    clear: both;
}

</style>


<body>
<div id="wrapper">
    <div class="floatme">
        left
    </div>
    <div id="floatme">
        right
    </div>
    <div class="minwidth"> </div>
</div>
</body>
</html>
于 2008-10-10T14:27:17.937 回答
1

这是你想要的一个很好的例子。

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

简而言之，这里是 CSS：

/* Start of Column CSS */
#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#ffa7a7; /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:#fff689; /* column 1 background colour */
}
#col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

这是html：

<div id="container2">
    <div id="container1">
        <div id="col1">
            <!-- Column one start -->
            <h2>Equal height columns</h2>
            <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>

            <h2>Valid XHTML strict markup</h2>
            <p>The HTML in this layout validates as XHTML 1.0 strict.</p>
            <!-- Column one end -->
        </div>
        <div id="col2">
            <!-- Column two start -->
            <h3>Windows</h3>
            <ul>
                <li>Firefox 1.5, 2 &amp; 3</li>
                <li>Safari</li>
                <li>Opera 8 &amp; 9</li>

                <li>Explorer 5.5, 6 &amp; 7</li>
                <li>Google Chrome</li>
                <li>Netscape 8</li>
            </ul>


            <!-- Column two end -->
        </div>
    </div>
</div>
于 2009-10-25T22:41:55.740 回答
0

好吧，我不想卷入政治争论，但是 Agoudzward 引用的文章中关于“为什么 CSS 比表格更好”的推理与表格无关。它表明，当许多页面元素需要相同的样式时，CSS 比一遍又一遍地使用单独的字体标签和颜色设置等要好。是的，我完全同意，如果页面上有一百个元素都应该是绿色、14pt、Arial 文本，那么为此创建 CSS 样式而不是一遍又一遍地复制和粘贴字体标签是非常有意义的，出于他们给出的所有原因。如果您想在多个页面上使用相同的样式，那会加倍。

但这与表格有什么关系？

推理似乎是“CSS 很好，因为它允许您指定一次而不是重复指定字体和颜色，因此可以使用 CSS 完成的任何事情都比任何可能的替代方案都要好”。好吧，这根本不遵循！仅仅因为一个工具适用于一种类型的问题并不意味着它适用于所有可能的问题。锤子非常适合钉钉子。这并不意味着我用它们来拧螺丝。如果我可以使用表格比使用 div 和 CSS 标签更简单、更合乎逻辑地进行布局，那么坚持我仍然应该使用 CSS，因为“CSS 很好”让我说，那又如何？

于 2009-10-14T14:10:19.983 回答
-4

使用 2 列表。它会做你想要的。Div 应该用于简单地划分逻辑上不同的块，并且表格用于布置列式数据。如果您想要两列，请使用表格，而不是试图强制 Div 表现得像表格。

于 2008-10-10T14:16:46.867 回答