CSSを絶対配置のサイドバーを考慮に入れるにはどうすればいいですか？

CSSを習得しようとしている間、私は苦労しています。相対位置付けdivに絶対配置されたdivのテキストを考慮させる方法を理解できないようです。CSSを絶対配置のサイドバーを考慮に入れるにはどうすればいいですか？

これは私のコードです：

行は、サイドバー内のテキストの終わりまで拡張するように、私はそれを作るにはどうすればよい

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.relative { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 100%; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.absolute { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 1; 
 
    width: 100px; 
 
    height: 100%; 
 
    border-right: 3px solid #73AD21; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<center> 
 
<div class="relative">This div element has position: relative; 
 
    <div class="absolute">This div element has position: absolute;</div> 
 
</div> 
 
</center> 
 

 
</body> 
 
</html>

？ただ、コメントなどの

おかげ

出典

2016-10-28 Paul de Koning

短いストーリーは、できません。 div： 'position：absolute'を持つdivは、親の幅と高さに物理的な影響を与えません。したがってオーバーフローします。考えられる解決方法は代わりに 'flexbox'または' float'を使うことです。 –

あなたはそれが同じ高さを得ることを意味するのですか？それは不可能です。絶対配置は、通常のレイアウトフローから要素を取り除くため、親の高さにはもう影響しません。実際にここで達成したいことについて言及するのはむしろ失敗しましたが、これまでに示したことから絶対的な位置付けが必要であるか、ここでは賢明ではないように見えます。内側のdivを配置する代わりに、内側のdivを浮動させると、望ましい結果（？）が得られるかもしれません。（それだけで、外側のdivには、その点で "内側の浮動小数点型の"浮動小数点数を含む "研究が含まれていません） – CBroe

' relative'要素の 'px'単位で' height'を使用します。 –

はもちろんの子供は絶対に配置されている場合、それは、子供を含むようにその高さを調整するために、親要素のために実際に可能ではありません。

相対位置と絶対位置が必須でない場合は、floatまたはflexboxを使用してこの効果を達成できます。

フロート法：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.relative { 
 
    width: 600px; 
 
    height: 100%; 
 
    border: 3px solid #73AD21; 
 
    overflow: auto; 
 
} 
 

 
div.absolute { 
 
    float: left; 
 
    width: 100px; 
 
    border-right: 3px solid #73AD21; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<center> 
 
<div class="relative">This div element has position: relative; 
 
    <div class="absolute">This div element has position: absolute;</div> 
 
</div> 
 
</center> 
 

 
</body> 
 
</html>

フレックスボックス方法：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.relative { 
 
    width: 600px; 
 
    height: 100%; 
 
    border: 3px solid #73AD21; 
 
    
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex-wrap: nowrap; 
 
    justify-content: flex-end; 
 
} 
 

 
div.absolute { 
 
    width: 100px; 
 
    border-right: 3px solid #73AD21; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<center> 
 
<div class="relative">This div element has position: relative; 
 
    <div class="absolute">This div element has position: absolute;</div> 
 
</div> 
 
</center> 
 

 
</body> 
 
</html>

リグ上の他の要素が必要である場合ht側では、それらをすべて別のコンテナ内にラップする必要があります。

出典

2016-10-29 08:32:23

私はあなたを最良の答えとして追加する方法を手がかりにしていませんが、これが助けになりました。どうもありがとう！ –

CSSを絶対配置のサイドバーを考慮に入れるにはどうすればいいですか？

答えて

関連する問題