代码之家  ›  专栏  ›  技术社区  ›  Rick

CSS:居中,流体左,固定右,源有序布局,最小/最大宽度[重复]

  •  5
  • Rick  · 技术社区  · 15 年前

    标题说明了这一点。我想要一个2列的CSS布局:

    • 具有固定的(像素)右列宽
    • 有一个流动的左列-使用所有可用的空间减去右列宽
    • 在我的例子中允许最小宽度-760px
    • 在我的例子中允许最大宽度为1024px

    如果窗口大于最大宽度,则内容将以最大值居中于页面上。如果窗口小于max width,则内容将填充页面的100%,除非它小于min width,这将使水平滚动条出现。

    我不在乎它是否使用浮动或负边距,但我想避免绝对定位。

    +---------------------------------------+
    |                                       |
    |  +---------------------------+-----+  |
    |  |fluid                      |fixed|  |
    |  |                           |     |  |
    |  |                           |     |  |
    |  +---------------------------+-----+  |
    |                                       |
    +---------------------------------------+
    
    3 回复  |  直到 15 年前
        1
  •  3
  •   derekerdmann    15 年前

    我强烈建议你去看看 CSS templates at Dynamic Drive . 第五个应该是你要找的(液体固定)。只需添加一个 max-width min-width 到主容器元素,您应该都设置好了。

    仅供参考,这些是非常好的模板,作为您的页面布局的基础使用。使用CSS是学习浮动和定位的一个很好的方法,它在我早期的web开发中确实帮助了我。

        2
  •  1
  •   Ryan Kinal    15 年前

    我的尝试: http://www.ryankinal.com/fluid/

    它不能完全工作,虽然这只是因为在非常小的窗口大小,我的负边距可以导致内容从页面上脱落。理论是这样的:

    1. 左栏位于容器的100%,并向左浮动
    2. 右列以0%宽度包装,浮动右包装
    3. 固定宽度的右列(在我的示例中为200px)
    4. 左栏和右栏左边距为右栏宽度的一半(在我的示例中为100px)

    但他们是我的公爵(目前)。

        3
  •  0
  •   meder omuraliev    15 年前

    你在找这样的东西吗负边距+浮动+正确的源顺序+右固定)

    http://blog.html.it/layoutgala/LayoutGala23.html

    索引页上的更多布局: http://blog.html.it/layoutgala/

    推荐文章