資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 使子 div 元素比父 div 元素更寬？
在 CSS 中，有時您希望將子 div 擴充套件到其父 div 之外，這要歸功於給定內容的一些特定特徵。在 CSS 中，這通常是適得其反的，因為大於其父級的 div 將會被裁剪，但可以修改某些屬性以使其工作。
使子 div 比父 div 更寬
這主要可以透過兩種方式完成，一種是使用 overflow 屬性，另一種是更改 position 屬性。
- 步驟 1 - 使用溢位：如果父容器足夠大，這種情況就不會成為問題，但是當有人嘗試設計時，他們最終會超出父容器，這將不是很好。要讓子元素擴充套件到其父容器之外，應將父容器的可見屬性設定為 visible。
- 步驟 2 - 使用定位：在這種情況下，父元素將獲得相對定位，而其子元素將獲得絕對定位。子容器需要為其分配值，以便其超出父容器的左右限制。
使子 div 超出父 div 寬度
在下面的示例中，我們將建立一個寬度為 200 畫素的父容器和一個寬度為 300 畫素的子容器。子 div 將擴充套件到父容器之外，我們將應用 overflow: visible 以確保顯示額外的寬度。
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>Make a Child div Element Wider than Parent div</title>
<style>
body {
display: flex;
justify-content: center;
font-family: Arial, sans-serif;
min-height: 100vh;
margin: 0;
align-items: center;
}
.parent {
width: 200px;
height: 300px;
background-color: blue;
color: white;
overflow: visible;
}
.child {
width: 300px;
height: 200px;
background-color: green;
position: relative;
left: -50px;
top: 30px;
color: white;
}
</style>
</head>
<body>
<div class="parent">
Parent div Section
<div class="child">
Child div Section
</div>
</div>
</body>
</html>
輸出
更新於： 2024-11-12
15 次檢視
廣告