Html 液体布局中水平对齐的div-一个div的背景延伸到另一个div的后面

我有一个流动的布局。我需要两个div在水平方向上相邻，并占据全部可用宽度。第二个div需要是其内容的宽度，因此第一个div应该占据剩余的空间

以下是我的尝试：

---

除了#other的背景延伸到#按钮后面之外，它还能工作。Im我的实际站点#其他站点的右侧也设置了背景图像。这意味着我需要的背景颜色和图像只延伸到#按钮，而不是超出它。谢谢

两个div中的第一个应该浮动。（如果不存在，则存在于不同的“层”和重叠中）

至于自动宽度的问题，我认为仅仅用html是做不到的。根据我的经验，使用div设置宽度/高度总是更好的

如果需要，您可以使用2 td表格（一个设置为100%宽度，另一个设置为宽度-例如200px）

祝你好运

<style>
#other {
    background-color: blue;
width: 40%;
}
#button {
   background-color: gold;
   float: right;
   border-radius: 10px;
   width: 60%; 
}
.clear{
   clear: both;
}

#其他{
背景颜色：蓝色；
宽度：40%；
}
#钮扣{
背景颜色：金色；
浮动：对；
边界半径：10px；
宽度：60%；
}
.清楚{
明确：两者皆有；
}

提交提交提交提交提交提交提交 其他一些内容

---

您必须以百分比的形式给第一个固定值。第二个分区中的文本将自动换行。

是否要求这两个分区不能设置任何宽度是。”因为您需要设置至少一个div的宽度。如果您不希望将第一个div的宽度计算为width:100%，那么您肯定必须设置第一个div的宽度；你为什么不把两个div都设置成一个百分比宽度呢？@你刚刚链接到我的小提琴上，这就是你想要做的吗？@trickeedickee我想#button是它内容的宽度，而不是页面宽度的20%（或任何东西）。真的不想开始使用表格进行布局，但似乎这可能是唯一的选择。你链接到了我的小提琴上，没有任何变化。Thanks很近，但有没有办法使#按钮的宽度与其内容一样大（如果它是内联显示的话）。ThanksIve在这里将您的代码保存到了一个fiddle中，但它似乎不起作用。我已对您的fiddle进行了更改：-）。指定宽度：按钮1的60%。现在它将自动对文本进行自动换行。让我知道这对你是否合适。这把小提琴-不，我只想把#按钮改成它的内容宽度。所以，如果你只有一个“提交”文本，它会短得多。谢谢 <div id="parent"> <div id="button"> Submit Submit Submit Submit Submit Submit Submit Submit Submit Submit </div> <div id="other"> Some other content </div> <div class="clear"></div> </div>