CSS：两个 div - 一个填充空间，一个缩小以适应答案

【问题标题】：CSS: Two divs - one fills space, one shrink-to-fitCSS：两个 div - 一个填充空间，一个缩小以适应
【发布时间】：2013-07-13 22:19:07
【问题描述】：

有没有办法让两个 div 彼此相邻放置，以便：

外部 div 的宽度未知
最右边的 div 将其宽度与其内容相匹配（缩小以适应）
最左边的 div 填充剩余空间

我看到 Paul D. Waite 几乎把它删掉了： xHTML/CSS: How to make inner div get 100% width minus another div width

在我的情况下，两个内部div需要交换位置，我就是不能剪切它。

有什么想法吗？

【问题讨论】：

标签： css layout html

【解决方案1】：

在 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

【讨论】：

那不行，你还需要改变 HTML 中 div 的顺序，否则右边的浮动 div 在另一个下面。我只是在 jsfiddle 中尝试过。
谢谢 Bazz，但你真的检查过我的 jsFiddle 吗？在这两种情况下，浮动的 div 都应该放在第一位，那么只将 left 更改为 right 有什么问题？
谢谢。请参阅我对 Bazzz 的回复。
@Anders 我真的不认为这很重要。如果你真的想坚持下去，你可以用Javascript来切换它们。
绝对漂亮。这正是我所需要的。谢谢楼主

【解决方案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 */
}

【讨论】：

嗯，没有冒犯，但你发布的小提琴和我的一样:)。我总是准备好被纠正，但似乎你只是做了同样的事情。
谢谢。不过，div 的顺序似乎有点奇怪。对于语义和屏幕阅读器的可用性，我希望最左边的 div 是代码中的第一个。
@bazmegakapa 我们在同一时间进行了这项工作。看看我们的发帖时间，他们有 1 分钟的时间。我开始的时候你的帖子还没有。
@Bazzz 我刚刚在我的答案下看到了你的评论，然后我看到了你的答案。在我看来，你想用你的答案来纠正我。不过，没有冒犯，这些事情发生了:)。
@bazmegakapa 没有被采纳，我添加了我的答案并注意到你的（只需将 float:left 更改为 float:right）缺少我提到的方面（divs 反过来），所以我添加了评论。在那之后，我认为您查看并更新了您的答案，并且 OP 设法为他的问题找到了正确的解决方案。我从来没有打算冒犯任何人。

【解决方案3】：

试试这个....

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>

希望对你有帮助！！！

【讨论】：

感谢您的回复。但是 div 的宽度是硬编码的，不会适应它们的内容。