Question

我正在尝试使用两个50％列宽的this布局。但似乎当右列达到其“最小宽度”时，它会进入左列。有没有办法使用'shim'技术为包装器设置最小宽度，以便两列都停止调整大小。因此，消除了在左栏下找到右栏的问题。

我的页面如下。

<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％宽度的色谱柱并使用垫片来正确设置最小宽度？

谢谢。

编辑：minwidth类中的空格实际上是＆amp; nbsp但它已被转换。 ;）

Answer 1

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

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

其次，您必须在现有标记周围添加其他包装器。此包装器用于设置理解最小宽度（不是IE）的浏览器的最小宽度。然后，您可以使用* html技巧专门针对IE 6，并将Stu Nicholl的技术应用于内部包装器。这里详细介绍了该技术，使用的具体示例是“＃2符合标准的IE模式”：

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

最终结果相当简单。它使用原始问题中提到的2-column ALA style技术创建2个50％的列，这些列具有总体最小宽度（在此示例中为500px），其中列停止调整大小并且右列不会落在左列之下。我希望这有帮助！

编辑：此技术可用于将跨浏览器兼容的最小宽度应用于任何内容。例如，列不需要各自为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/

Answer 2

尝试以下风格：

.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }

Answer 3

只需为包装器设置最小宽度，只需将左右列更改为百分比即可。这样可以防止你的两列被推入/反对/低于对方。

Answer 4

这是一个快速尝试，但它可以工作（仅在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>

Answer 5

试试这个：

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

Answer 6

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

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>

Answer 7

好吧，我不想进入一个政治论点，但是Agoudzward引用文章中关于“为什么CSS比表更好”的推理与表格没什么关系。它表明，当许多页面元素调用相同的样式时，CSS比一次又一次地使用单独的字体标签和颜色设置等更好。是的，我绝对同意，如果你在页面上有一百个元素都应该是绿色，14pt，Arial文本，那么为此创建一个CSS样式而不是一遍又一遍地复制和粘贴字体标记是非常有意义的。，由于他们给出的所有理由。如果您希望在多个页面中使用相同的样式，那么这将是双倍的。

但这与桌子有什么关系？

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

Answer 8

使用2列表。它会完全按照你的意愿行事。 Div应该用于简单地划分逻辑上不同的块，并且表格用于布置柱状数据。如果你想要两列，请使用一个表，而不是试图强迫Div表现得像一个表。

CSS：两个不符合最小宽度的50％流体柱

8 个答案: