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

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

• 外部div的宽度未知
• 最右边的div将其宽度调整为其内容（收缩以适应）
• 最左边的div将填充剩余的空间

我看到Paul D.Waite在这里几乎做到了：

在我的情况下，两个内部div需要切换位置，而我就是无法切换

---

有什么想法吗？

在保罗的例子中，只需将

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>

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

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

给你：

保罗·韦特的例子符合你的问题

#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 */
}

试试这个

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>

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

<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>

#外
{
宽度：100%；
身高：100%；
边框：1px纯黑；
}
#左内
{
宽度：75%；
浮动：左；
边框：5px纯黑；
}
#内右翼
{
宽度：200px；
浮动：左；
边框：5px纯黑；
}

---

希望这有帮助

这不行，您还需要更改HTML中div的顺序，否则右浮动div位于另一个div之下。我刚刚在JSFIDLE上试用过。谢谢，巴兹，但是你真的检查过我的JSFIDLE了吗？在这两种情况下，浮动div都应该放在第一位，所以只将

left

更改为

right

有什么不对？谢谢。看我对Bazzz的回复。@Anders我真的认为这没什么大不了的。如果你真的想坚持下去，你可以用Javascript.com来切换它们。这正是我需要的。谢谢你，先生，无意冒犯，但是你贴了和我一样的小提琴：）。我随时准备被纠正，但你似乎也做了同样的事。谢谢。不过，div的顺序似乎有点奇怪。对于语义和屏幕阅读器的可用性，我更希望最左边的div是代码中的第一个div。看一看我们的发帖时间，它们只差1分钟。当我开始的时候，你的帖子还没有出现。@Bazzz我只是在我的答案下面看到了你的评论，然后我又看到了你的答案。我只是觉得你想用你的答案来纠正我。不过，无意冒犯，这些事情会发生：）@bazmegakapa none，我添加了我的答案，并注意到您的答案（简单地将float:left更改为float:right）缺少了我提到的方面（divs则相反），所以我添加了评论。在那之后，我认为你审查并更新了你的答案，OP设法为他的问题找到了正确的解决方案。我从来没有冒犯过任何人。谢谢你的回复。但是div的宽度是硬编码的，不能适应其内容。