站長(zhǎng)資訊網(wǎng)這篇文章主要介紹了純CSS讓子元素突破父元素的寬度限制,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
在寫(xiě)樣式中，我們可以經(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>
如果你仔細(xì)思考過(guò)這個(gè)現(xiàn)象的話(huà)，why? 可能會(huì)問(wèn)子元素不應(yīng)該撐開(kāi)父元素的寬度嗎？就想撐開(kāi)父元素的高度一樣。why? 那么如何讓這個(gè)子元素的父元素?fù)伍_(kāi)這個(gè)寬度呢？這里提供兩種解決方案。
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撐開(kāi)了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>
效果如下圖
文章來(lái)源：腳本之家，原文鏈接：https://www.jb51.net/css/743595.html
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
