1. Fixed width + adaptive Expected effect: fixed width on the left, adaptive width on the right Common code: <div class="parent"> <div class="left"> <p>left menu</p> </div> <div class="right"> <li>right item1</li> <li>right item2</li> <li>right item3</li> </div> </div> css: html, body, p, ul, li { margin: 0; padding: 0; } div.left { background: #d2e3e3; } div.right { background: #77DBDB; } Solution 1: float .left { float: left; width: 100px; } .right { margin-left: 100px; // or overflow: hidden } Solution 2: table .parent { display: table; width: 100%; table-layout: fixed; // https://blog.csdn.net/qq_36699230/article/details/80658742 .left, .right { display: table-cell; } .left { width: 100px; } } Option 3: flex .parent { display: flex; .left { width: 100px; // or flex: 0 0 100px; } .right { flex: 1; } }
.parent { display: table; width: 100%; // Setting table-layout: fixed; will make the cells equal in width, so .left, .right are not set here { display: table-cell; } .left { width: 0.1%; // Set the width to a minimum value. Since table-layout: fixed is not set, the width is determined by the content. white-space:nowrap; } } 2. Equal width (two/multiple columns) layout Public code: <div class="parent"> <div class="column"> <p>1</p> </div> <div class="column"> <p>2</p> </div> <div class="column"> <p>3</p> </div> <div class="column"> <p>4</p> </div> </div> CSS html, body, div, p { margin: 0; padding: 0; } .parent { width: 800px; border: 1px solid coral; .column { height: 30px; background: bisque; p { background: #f0b979; height: 30px; } } } Solution 1: float (I personally don’t like it because it’s too rigid, requires knowing how many columns there are, and will exceed the container if there is a border) .parent { margin-left: -20px; overflow: hidden; .column { float: left; width: 25%; padding-left: 20px; box-sizing: border-box; } } Option 2: flex (recommended) .parent { display: flex; .column { flex: 1; &+.column { margin-left: 10px; } } } 3. Equal height layout Recommended Solution: .parent { display: flex; } .left, .right { flex: 1; } 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. |
<<: Web design experience: Make the navigation system thin
>>: Some small methods commonly used in html pages
1. Create a test table CREATE TABLE `mysql_genara...
Table of contents 1. Function Introduction 2. Key...
This article records the installation and configu...
What is a transaction? A transaction is a logical...
Use native js to implement a simple calculator (w...
Today, due to project requirements, js is needed t...
Table of contents 1. Understanding Queues 2. Enca...
Vue+js realizes the fade in and fade out of the v...
When I first started, I found a lot of errors. In...
Basic Concepts Current read and snapshot read In ...
Preface Crond is a scheduled execution tool under...
This article shares the specific code of how to d...
Introduction Describes the use cases and solution...
Table of contents Function call optimization Func...
Preface So I wrote this blog. This blog also reco...