CSS:两个div - 一个填充空间,一个缩小到适合

时间:2011-05-05 06:50:12

标签: css layout html

有没有办法让两个div放在一起,以便:

  • 外部div的宽度未知
  • 最右边的div使其宽度达到其内容(缩小到适合度)
  • 最左边的div填充剩余空间

我看到保罗D.韦特几乎在这里削减了它: xHTML/CSS: How to make inner div get 100% width minus another div width

在我的情况下,两个内部div需要切换位置,我只是无法切割它。

有什么想法吗?

3 个答案:

答案 0 :(得分:9)

在Paul的例子中,只需将float: left更改为float: right

<强> HTML:

<div id="outer">
    <div id="adaptive">I will adapt my width to my content.</div>
    <div id="filler">I will fill the remaining space.</div>
</div>

<强> CSS:

#outer { overflow: hidden; width: 100%; }
#adaptive { float: right; }
#filler { overflow: hidden; }

Test jsFiddle

答案 1 :(得分:2)

你走了:

http://jsfiddle.net/BhAcn/1/

Paul Waite的例子符合你的问题

#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;
}

#inner1 {
    float: right;/* Make this div as wide as its contents */
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
}

答案 2 :(得分:-2)

试试这个......

<强> HTML

<div id="outer">
 <div id="inner-left">
  <p>hello</p>
 </div>
 <div id="inner-right">
  <p>hello1</p>
 </div>
</div>

<强> CSS

<style type="text/css">
    #outer
    {
        width:100%;
        height:100%;
        border:1px solid black;
    }
    #inner-left
    {
        width:75%;
        float:left;
        border:5px solid black;
    }
    #inner-right
    {
        width:200px;
        float:left;
        border:5px solid black;
    }

    </style>

希望这有帮助!!!