Question

我有以下情况：

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>

我需要第二个div在一行中右对齐并且只需要根据需要加宽，并留下一个填充左边的剩余空间。我怎样才能做到这一点？

ASCII艺术：

[ Fill-me                        ][As-needed-only, align right]

我想要实现的XAML版本：

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

Answer 1

您可以将display: table-cell用于子div＆{39}和display: table为父母：

＆＃13;

div > div {
  display: table-cell;
}
div > div:first-child {
  width: 100%;
  background: red;
}
div > div:last-child {
  background: green;
  white-space: nowrap;
}

＆＃13;

<div style="width: 500px;display: table;">
  <div>Fill-me</div>
  <div>As-needed-only, align right</div>
</div>

＆＃13;

Answer 2

我认为FLOATING最容易实现，你必须将左右两个div向右浮动，然后我更喜欢用％来计算宽度，比如右边30％另一个div（左）将采取我想的剩余空间.. 试一试

如果你需要正确的div来占用所需的空间，你必须做一些计算，就像使用php或其他服务器端语言一样，你可以指定行的单词数量，然后确定相应的宽度。

如何在CSS中水平填充？

2 个答案: