国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > 純CSS讓子元素突破父元素的寬度限制

純CSS讓子元素突破父元素的寬度限制

時間:2024-02-24 00:00:01 | 來源:網(wǎng)站運營

時間:2024-02-24 00:00:01 來源:網(wǎng)站運營

純CSS讓子元素突破父元素的寬度限制:

這篇文章主要介紹了純CSS讓子元素突破父元素的寬度限制,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

在寫樣式中,我們可以經(jīng)??吹竭@樣的情況

代碼如下

<div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;">
父元素
<div style="border: 1px solid blue;height: 100px;white-space: nowrap;">
<span>子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素</span>
</div>
</div>

如果你仔細思考過這個現(xiàn)象的話,why? 可能會問子元素不應該撐開父元素的寬度嗎?就想撐開父元素的高度一樣。why? 那么如何讓這個子元素的父元素撐開這個寬度呢?這里提供兩種解決方案。

1. display: inline-block

布局樣式如下

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#box1 {
width: 500px;
height: 200px;
border: 2px solid blue;
padding: 10px;
}

#box2 {
white-space: nowrap;
display: inline-block;
}

#box3 {
width: 300px;
height: 200px;
background-color: blueviolet;
display: inline-block;
vertical-align: middle;
}

#box4 {
width: 400px;
height: 200px;
background-color: black;
display: inline-block;
vertical-align: middle;
}
</style>

<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
<div id="box4"></div>
</div>
</div>
</body>

</html>

結(jié)果如圖,box3和box4撐開了box2的寬度

2. display: inline-flex

布局樣式如下

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#box1 {
width: 500px;
height: 200px;
border: 2px solid blue;
padding: 10px;
}

#box2 {
white-space: nowrap;
display: inline-flex;
}

#box3 {
width: 300px;
height: 200px;
background-color: blueviolet;
vertical-align: middle;
}

#box4 {
width: 400px;
height: 200px;
background-color: black;
vertical-align: middle;
}
</style>

<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
<div id="box4"></div>
</div>
</div>
</body>

</html>

效果如下圖

文章來源:腳本之家,原文鏈接:https://www.jb51.net/css/743595.html

關(guān)鍵詞:寬度,限制,突破

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉