【问题标题】:3 columns: one with max-width, two others with min-width3 列:一列最大宽度,另外两列最小宽度
【发布时间】:2010-10-20 12:08:35
【问题描述】:

三列必须填满父容器的宽度。左右两列的宽度不得小于 150px。中心列的宽度不得大于 200 像素。

我制作了a reference page,它使用 JavaScript 进行布局。可以用纯 CSS 做同样的布局吗?

screenshot http://elv1s.ru/files/html+css/min-width_max-width_columns.png

它至少应该在 IE 8、Firefox 3.6、Chrome 7、Safari 5 和 Opera 10.63 中工作。

【问题讨论】:

  • 这可能取决于您需要它与浏览器兼容的程度。
  • 最新版本的 IE、Firefox、WebKit 和 Opera。

标签: html css layout


【解决方案1】:

【讨论】:

    【解决方案2】:

    我不是专家,但我很确定如果答案是肯定的,那么它就在这个页面上:

    该页面(以及整个网站)非常棒 - 它向您展示了如何实现许多不同的布局(仅使用 CSS),并准确解释了它们的工作方式和原因。即使该页面不包含适合您的布局,该页面也很有可能让您大致了解需要采用的方法。

    还有,祝你好运!

    【讨论】:

    • 这是一个不错的页面,但它似乎并没有涵盖我的最小宽度/最大宽度问题。
    【解决方案3】:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    #container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
    #aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
    #primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
    #secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="aside">Leftmost content</div>
        <div id="primary">Primary content</div>
        <div id="secondary">Secondary content</div>
    </div>
    </body>
    </html>
    

    关于此布局的几点说明:

    1. 我指定高度和背景仅用于显示目的。
    2. 溢出自动在包含元素上清除浮动;虽然您也可以使用更清晰的 div。
    3. 容器具有可变宽度,但最大为 960。我随意选择了这个数字,但最好在文本行变得太长之前将流体宽度最大化。
    4. 如果您保持容器流畅,如果视口变得足够小,布局中断。编辑:我在容器中添加了 400px 的最小宽度,这应该可以解决问题

    另外,我想看看 http://www.alistapart.com/articles/holygrail/ 。虽然这是一篇详细介绍固定-流体-固定三列布局的文章,但如果您愿意的话,我认为您可以使用其中一些想法来改进我的布局。

    【讨论】:

    • 当我禁用 max-width:960px elv1s.ru/i/… 时,这不起作用。当#container 大于 1000px 宽度时,#aside 和 #secondary 仍然是 40% 宽度。在这种情况下,侧列的宽度应超过 40% 以适合#container。
    • @NV 因为中间列的最大宽度为 200px 并设置为容器的 20%,当 20% 的容器超过 200px 时,布局停止扩展。您可以通过将容器的背景设置为与中间列相同来屏蔽此效果。但是,我无法想象有很多场景需要针对大于 1000 的视口进行优化。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-05-14
    • 1970-01-01
    • 2023-03-29
    • 2012-11-13
    • 2011-10-18
    • 1970-01-01
    • 2014-10-22
    相关资源
    最近更新 更多