我該如何讓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

長話短說，你不能。具有'position：absolute'的div對它的父寬度和高度沒有物理影響 - 因此它會溢出。可能的解決方案是使用'flexbox'或'float'來代替。 –

你的意思是你想讓它達到相同的高度？這是不可能的;絕對定位將元素排除在正常佈局流程之外，因此它不會再影響其父級的高度。你寧願沒有提到你實際想要在這裏實現的目標 - 但從你迄今爲止所展示的內容來看，它看起來並不像絕對定位那樣必要或者在這裏是明智的。你可能會得到想要的結果（？），如果你浮動內部div，而不是定位它。（這本身不會使外部div包含內部去的研究「在這方面含有浮動」）。 – CBroe

對'relative'元素使用'px'單位的高度。 –

就像意見提了，這的確是不可能的父元素，以調整其高度以容納孩子，如果孩子是絕對定位。

如果相對和絕對定位不是必須的，那麼你可以達到使用浮動或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考慮到絕對定位的邊欄

回答

相關問題