div の幅をコンテンツと同じ幅にしようとしています。ここに私が何を意味するかを示すフィドルがあります:
青の領域を白と同じくらい広くしたい。と を試しましたがfloat:left
、display:inline-block
では機能しませんposition:absolute;
。回避策はありますか?
ブロックレベルの要素は実際にこれを自然に行います。あなたが抱えている問題は、絶対配置された要素が通常のフローから取り出されるため、ブロックが白いボックスをラップできないことです。
それらを絶対に配置する必要がある理由はありますか?
編集:白いボックスを中央に配置したいだけなら、ここに行きます:http://jsfiddle.net/Marconius/djxpU/1/
コード(私がしなければならないため):margin: 0 auto;
白い領域を青い親に合わせたい場合は、白い領域の幅を 100% に設定します。#X{
width:100%;
}
デフォルトでは、div はその親の幅になり、ブロックとして表示されます。左マージンを維持しながら、利用可能なスペースを埋める div の例を次に示します。
これを 'X' div に適用します。{ margin-left: 120px; height: 40px; background-color: white;}