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

如何在CSS中创建一个两列的布局,其中一列收缩到它的内容,另一列展开以填充剩余的空间?

css
  •  4
  • Eric  · 技术社区  · 14 年前

    我有两个 <div> 在我的页面上。我想将它们并排排列,以便第一个(右)缩小以适应其内容(未知宽度),第二个(左)扩大以填充剩余的水平宽度。

    这两列的高度不必相等。

    这种布局是否可以不使用表格?

    编辑:

    这里有一个 table version 向你展示我想要的行为。

    4 回复  |  直到 5 年前
        1
  •  3
  •   Community CDub    8 年前

    我想我对另一个问题的回答解决了这个问题:

    xHTML/CSS: How to make inner div get 100% width minus another div width

        2
  •  1
  •   greg0ire    14 年前

    是的!您可以将第一列向左浮动,并使用边距来创建间距。

        3
  •  1
  •   Eric    14 年前

    http://innonesen.se/test/l-41-mod/

    另外一个特点是主容器将停止膨胀, 当边栏宽度小于100px时。

    http://innonesen.se/test/l-41-mod/no-right.html

    对不起,我不能通过网址。。我的代表太低了。

        4
  •  -1
  •   Pat    14 年前

    当然,给你 two different fiddles

    “绝对列”使用一个固定宽度的绝对列,然后另一列设置一个等于“绝对列”宽度的左边距。