html - CSSで親の幅を調整せずに子要素の幅を調整するにはどうすればよいですか？

Question

私は次のものを持っています：

<div class="parent">
  <div class="sizer" />
  <div class="child" />
</div>

.sizer {
width: 200px;
}

.child {
position: relative;
width: 400px;
}

親に幅を明示的に設定することは許可されていません。また、子をに設定することも許可されていませんposition:absolute。

CSSを使用して、幅を200から400.childに拡張せずに、幅を400に設定する他の方法はありますか？.parent

score 2 · Accepted Answer

親の幅が設定されている場合、子の幅が親の幅を超えていても、子の幅に合わせて拡張することはありません。このJSフィドルの例を参照してください。

.parent {
    width: 300px;
    height: 50px;
}

.child {
    width: 400px;
    height: 50px;
    position: relative;

}

ここに画像の説明を入力してください

アップデート

親に幅を設定せずにそれを行うことができるようなハックがあるかどうか疑問に思っています

親が何らかの幅または幅のようなプロパティを持っていない限り、これを達成する方法はありません。width親のプロパティのみを使用することに反対する場合は、幅のようないくつかの選択肢を使用できます。

cimmanonが以下のコメントで説明しているように、を設定.parentすることができますmax-width。必ずしもそうである必要はありません100%; 子の幅よりも小さい限り、どの最大幅でもかまいません。このJSFiddleの例を参照するか、次のコードを確認してください。

.parent {
    max-width: 200px;
} 

.child {
   width: 400px;
}

または、 andプロパティを使用position:absoluteして設定することもできます。このJSFiddleの例を参照するか、次のコードを確認してください。leftright

.parent {
    position:absolute;
    left:0;
    right:0;
}

ただし、これらは多くの可能な選択肢のうちの2つにすぎないことを忘れないでください。お役に立てれば！

score 0 · Accepted Answer

親の最大幅を100％に設定できます。

.parent {
    max-width: 100%;
}

.child {
    width: 400%;
}

2 に答える 2