Html 如何在CSS中水平填充？

我有以下场景：

div.container {
    min-width: 500px;
}

div.container div.left {

}

div.container div.right {

}

<div class="container">
    <div class="left">Fill-me</div>
    <div class="right">As-needed-only, align right</div>
</div>

---

我想要实现的XAML版本：

<DockPanel>
    <Grid DockPanel.Dock="Right">
        <TextBlock>Right</TextBlock>
    </Grid>
    <Grid> <!-- Will fill rest of space -->
        <TextBlock>Left</TextBlock>
    </Grid>
</DockPanel>

赖特
左边

您可以将

显示：表格单元格

用于子

div

，将

显示：表格

用于父：

div>div{
显示：表格单元格；
}
div>div：第一个孩子{
宽度：100%；
背景：红色；
}
div>div：最后一个孩子{
背景：绿色；
空白：nowrap；
}

填满我
仅根据需要，向右对齐

我认为最好是通过浮动来轻松实现，你必须将左和右div都浮动到右侧，然后我更喜欢按%计算宽度，比如右30% 我想另一个分区（左）将占用剩余的空间。。 试试看

---

如果您需要正确的div来占用所需的空间，那么您必须进行一些计算，比如如果您使用php或其他服务器端语言，您可以指定行的字数，并据此确定宽度。

如果第一个div的内容超过一行，该怎么办？使用flexbox很容易做到。我不能使用flexbox（即8兼容性：（）@FabrizioCalderan容器应展开以适应内部的所有内容。将示例从宽度编辑为最小宽度。第一（左）列应占据所有可用空间。您可以使用：div>div:First child{width:100%}div>div:last child{white space:nowrap}@skobaljic是的。谢谢你的反馈。右边的div应该填充所需的宽度。这不一定是30%。

<DockPanel>
    <Grid DockPanel.Dock="Right">
        <TextBlock>Right</TextBlock>
    </Grid>
    <Grid> <!-- Will fill rest of space -->
        <TextBlock>Left</TextBlock>
    </Grid>
</DockPanel>