Question

我试图让下面的第一个div孩子使用可用空间减去100%的{{1}}，然后使用第二个20px孩子来使用div与第一个孩子20px位于同一行。

div

这应该可以通过CSS第一级（这意味着没有<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>跛脚）来完成，虽然我知道我错过了一些东西。此外，两个position元素中都会anchors 必须使用100％的可用宽度，因此这里有一个技巧可让div表现出来某种方式......

Answer 1

解决方案＃1

利用overflow: hidden（或溢出：自动）填充剩余的水平空间。

（ NB：为此，您需要先在标记的右侧放置元素）

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

使用calc

<强> FIDDLE

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

上

在第二组div width: 50px;

上

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

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

Answer 2

你能改变一下HTML结构吗？

<div style="width: 10%;">
    <div style="display: block; width: 100%;">
        <div style="width: 20px; float: right;"></div>
    </div>
</div>

Answer 3

这是使用display:table的另一种方法。

<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>

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

3 个答案:

解决方案＃1

CSS

解决方案＃2

CSS

解决方案＃3

解决方案＃4（需要CSS3）