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 implementing background blur effect with CSS
Is it the effect below? If so, please continue re...
How to change the MySQL database directory location under Linux (CentOS) system
How to change the MySQL database directory locati...
Detailed explanation of the use of React list bar and shopping cart components
This article example shares the specific code of ...
Example code for implementing equal height layout in multiple ways with CSS
The equal height layout described in this article...
Common structural tags in XHTML
structure body, head, html, title text abbr, acro...
Specific use of nginx keepalive
The default request header of the http1.1 protoco...
Sample code for implementing a background gradient button using div+css3
As the demand for front-end pages continues to in...
MySQL 8.0.15 winx64 installation and configuration method graphic tutorial
This article shares the installation and configur...
Analysis of 2 implementation methods of configuring jnid data source in Tomcatc3p0
Using c3p0 Import the c3p0jar package <!-- htt...
Solution to the problem that VC6.0 cannot be used when installed on WIN10
VC6.0 is indeed too old VC6.0 is a development to...
About the use of Vue v-on directive
Table of contents 1. Listening for events 2. Pass...
Introduction to nesting rules of html tags
There are many XHTML tags: div, ul, li, dl, dt, d...
MySQL changes the default engine and character set details
Table of contents 1. Database Engine 1.1 View dat...
Tips for optimizing MySQL SQL statements
When faced with a SQL statement that is not optim...
How to add shortcut commands in Xshell
As a useful terminal emulator, Xshell is often us...