CSS全宽减边距左div，20px同行右div

Question

我试图让下面的第一个 div 子级用完可用空间的 100% 减去 20px 然后使用第二个div 子级使用 20px 并与第一个子级 div 在同一行。

<div style="width: 10%;">

<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>

<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>

</div>

这应该能够通过 CSS 一级(这意味着没有 position 错误)来完成，尽管我知道我遗漏了一些东西。两个 div 元素中也会有 anchors，必须 使用 100% 的可用宽度，所以这里有一个技巧来获取 float 以某种方式行事...

Answer 1

解决方案#1

利用overflow: hidden(或overflow: auto)来填充剩余的水平空间。

(注意:为此，您需要先在标记中将元素放在右侧)

FIDDLE

<div>
    <div class="div2">DIV 2</div>
    <div class="div1">DIV 1</div>   
</div>

CSS

.div1 {
    background:yellow;
    overflow: hidden;
}
.div2 {
    background:brown;
    float:right;
    width: 50px;
}

解决方案#2

您可以使用 box-sizing: border-box

FIDDLE

<div>
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
</div>

CSS

.div1 {
    background:yellow;
    float:left;
    padding-right: 50px;
    margin-right: -50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}
.div2 {
    background:brown;
    float:left;
    width: 50px;
}

解决方案#3

使用 css 表格:

FIDDLE

<div class="container">
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
</div>

.container
{
    display:table;
}
.div1 {
    background:yellow;
    display: table-cell;
    width: 100%;
}
.div2 {
    background:brown;
    width: 50px;
    display: table-cell;
    word-break: break-word;
    min-width: 50px;
}

解决方案#4(需要 CSS3)

使用计算

FIDDLE

在第一个子集上 width: calc(100% - 50px)

在第二个 div 上设置 width: 50px;

.div1 {
    background:yellow;
    width: calc(100% - 50px);
    float: left;

}
.div2 {
    background:brown;
    width: 50px;
    float: left;
}