0

私は過去にこれを行ったことがありますが、パディングを使用していると思います。アイデアは、パーセンテージ (100%) の幅と (50px) の固定ピクセルを持つ 2 つの要素 (div) を並べて (floats) したいということです。

下手なイラスト:

------------------------------------------------
|              100%             |     50px     |
------------------------------------------------

私は次のいずれかをしたくない

  • JavaScript
  • 95% などのように 100% 未満の幅は機能しません
4

2 に答える 2

1

ここでの別の答え：jsfiddle

#one
{
  width:100%;
  float:right;
}

#two
{
  width:50px;
  margin-right:-100%;
  float:right;
}

もちろん、これは親divにclearfixソリューションを追加した後です。

これはおそらく最も意味的な方法ではありませんが、機能します。この方法を使用する場合は、コンテンツの最初のdiv（幅が100％）に別のdivを追加することをお勧めします。

于 2013-01-09T04:25:43.447 に答える
1

あなたのフィドルから、私が考えた唯一の方法であると思った方法で解決したように見えます。絶対的な位置に配置し、息を吸う余地を与えるためにパディングを使用します。質問に対する独自の回答を投稿できることを知っています:D

これは、同じ問題を抱えている可能性があり、フィドルなしで直接回答が必要な他のユーザー向けの実際の回答コードです。

HTML

<div class="black">
    <div class="yellow">
    </div>
    <div class="purple">
    </div>
</div>

CSS

.black{background:black;padding-right:70px;height:100px;position:relative;}
.yellow{background:yellow;width:100%;height:100%;}
.purple{background:purple;width:50px;height:100%;margin:0 0 0 20px;position:absolute;right:0;top:0;}
于 2013-01-09T04:11:27.390 に答える