Example code for implementing equal width layout in multiple ways using CSS
|
The equal-width layout described in this article uses pure CSS to achieve the effect of making each element have the same width without manually setting the element width. 1. Use table-cell to implement (compatible with ie8)
<style>
body,div{
margin: 0;
padding: 0;
}
.table-layout{
display: table;/*The parent element must be set to table*/
table-layout: fixed;/*This attribute must be present, otherwise the effect will not be achieved*/
width: 50%;
margin: 20px auto;
}
.table-cell-layout{
display: table-cell;/*The child element must be set to table-cell*/
height: 40px;
border: 1px solid #666;
border-left: none;
}
.table-cell-layout:first-child{
border-left: 1px solid #666;
}
</style>
<body>
<ul class="table-layout">
<li class="table-cell-layout">li1</li>
<li class="table-cell-layout">li2</li>
<li class="table-cell-layout">li3</li>
<li class="table-cell-layout">li4</li>
<li class="table-cell-layout">li5</li>
</ul>
</body>2. Use flex layout to achieve
<style>
body,div{
margin: 0;
padding: 0;
}
.flex-layout{
display: flex;
width: 50%;
margin: 20px auto;
}
.flex-item{
flex: 1;
height: 40px;
border: 1px solid #666;
border-left: none;
}
.flex-item:first-child{
border-left: 1px solid #666;
}
</style>
<body>
<ul class="flex-layout">
<li class="flex-item">li1</li>
<li class="flex-item">li2</li>
<li class="flex-item">li3</li>
<li class="flex-item">li4</li>
<li class="flex-item">li5</li>
</ul>
</body>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
>>: Getting Started Guide to Converting Vue to React
Recommend
Example code for changing the style of other tags by hovering the mouse using CSS
Preface: As far as I know, currently CSS can only...
JavaScript event capture bubbling and capture details
Table of contents 1. Event Flow 1. Concept 2. DOM...
Solve the problem of PhPStudy MySQL startup failure under Windows system
Report an error The Apache\Nginx service started ...
MySQL database JDBC programming (Java connects to MySQL)
Table of contents 1. Basic conditions for databas...
Deploy Confluence with Docker
1. Environmental requirements 1. Docker 17 and ab...
Ubuntu 18.0.4 MySQL 8.0.20 installation and configuration method graphic tutorial
The installation and configuration method of MySQ...
Detailed tutorial on installing MariaDB on CentOS 8
MariaDB database management system is a branch of...
JavaScript to achieve product query function
This article example shares the specific code of ...
Briefly describe the installation of influxDB distributed time series database and related operations in Docker
Introduction to influxDB influxDB is a distribute...
Centos8 bridge static IP configuration method in VMware virtual machine
1. Make sure the network connection method is bri...
Detailed explanation of writing multiple conditions of CSS: not
The :not pseudo-class selector can filter element...
A brief talk about Rx responsive programming
Table of contents 1. Observable 2. Higher-order f...
Why Nginx is better than Apache
Nginx has taken over the majority of the Web serv...
Ideas and methods for realizing real-time log reporting with Nginx pure configuration
Table of contents Preface Implementation ideas Im...
MySQL 8.0.11 installation and configuration method graphic tutorial
The installation and configuration methods of MyS...