2

div下の最初の子を使用100%可能なスペースをマイナス20pxにしてから、2番目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 レベル 1 で実行できるはずです (つまり、position不自由がないことを意味します)。また、使用可能な幅の 100% を使用する必要anchorsがある両方のdiv要素があるため、特定の方法で動作させるためのトリックがここにあります...float

4

3 に答える 3

10

解決策 1

(またはオーバーフロー: 自動)を使用overflow: hiddenして、残りの水平スペースを埋めます。

(注:これを機能させるには、マークアップの最初に要素を右側に配置する必要があります)

フィドル

<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

フィドル

<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 テーブルを使用します。

フィドル

<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

フィドル

最初の子セットwidth: calc(100% - 50px)

2 番目の div セットwidth: 50px;

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

}
.div2 {
    background:brown;
    width: 50px;
    float: left;
}
于 2013-10-24T23:58:34.350 に答える
1

を使用した別のアプローチを次に示し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>
于 2013-10-25T00:40:18.933 に答える