在写款式中，大家能够常常见到那样的状况
编码以下
<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>
假如你细心思索过这一状况得话，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>
結果如图所示，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>
实际效果以下图
到此这篇有关纯CSS让子原素提升父原素的总宽限定的文章内容就详细介绍到这了,大量有关CSS子原素提升父原素总宽內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！