Pure CSS allows child elements to break through the width limit of parent elements
|
In writing styles, we can often see this situation
The code is as follows
<div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;">
Parent element <div style="border: 1px solid blue;height: 100px;white-space: nowrap;">
<span>child elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elements</span>
</div>
</div>If you think about this phenomenon carefully, why? You might ask, shouldn’t the child element expand the width of the parent element? Just like expanding the height of the parent element. Why? So how can we make the parent element of this child element expand to this width? There are two solutions here. 1. display: inline-block The layout style is as follows
<!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>The result is as shown in the figure. Box3 and box4 expand the width of box2.
2. display: inline-flex The layout style is as follows
<!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>The effect is as follows
This is the end of this article about how to use pure CSS to make child elements exceed the width limit of parent elements. For more relevant CSS child elements exceeding the width of parent elements, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Two ways to prohibit clearing the input text input cache in html
>>: MySQL changes the default engine and character set details
Recommend
Example of implementing grouping and deduplication in MySQL table join query
Table of contents Business Logic Data table struc...
How to restore docker container data
The project test environment database data is los...
Linux sudo vulnerability could lead to unauthorized privileged access
Exploiting a newly discovered sudo vulnerability ...
Key issues and solutions for web page access speed
<br /> The website access speed can directly...
MySQL 8.0.15 winx64 installation and configuration method graphic tutorial
This article shares the installation and configur...
Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse
tomcat official website tomcat is equivalent to a...
Some "pitfalls" of MySQL database upgrade
For commercial databases, database upgrade is a h...
Let's talk about the storage engine in MySQL
Basics In a relational database, each data table ...
mysql 8.0.16 winx64.zip installation and configuration method graphic tutorial
This article shares the specific code of MySQL 8....
Install Tomcat on Linux system and configure Service startup and shutdown
Configure service startup and shutdown in Linux s...
A brief discussion on the design and optimization of MySQL tree structure tables
Preface In many management and office systems, tr...
Application of Hadoop counters and data cleaning
Data cleaning (ETL) Before running the core busin...
Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources
After being tortured by the front-end cross-domai...
How to install FastDFS in Docker
Pull the image docker pull season/fastdfs:1.2 Sta...
MySQL users and permissions and examples of how to crack the root password
MySQL Users and Privileges In MySQL, there is a d...