在写样式中，我们可以经常看到这样的情况
代码如下
<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子元素突破父元素宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
dreamweaver cs6软件是一款非常好用的网页编辑器软件,用户在编辑网页时采用代码...
实现效果 实现思路 融化效果是利用 filfilter 的 contrast 和 blur 实现的。 在...
文章同步更新于公众号：小和山的菜鸟们 ES 是什么？ ECMAScript (or ES ) [1] is...
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底...
最近在做项目时，发现CSS3中关于动画的技术，自己很少运用在项目中，平时一些列...
前言 电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名，其...
先看效果 实现代码 div class=box box1/divdiv class=box box2/divdiv class=box...
video实现自动播放有声音 需求：老板见人家可以的，我们的也要可以！！！ 前端：...
命令简介 vmstat 命令用于虚拟内存统计。vmstat 报告有关进程，内存，分页，块IO...
解决方法有两种： 一种是CSS，使用background-size:cover实现图片的拉伸效果，但...
