Five ways:
Float layout:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style>. height: 300px; min-width: 600px; } .side { height: 300px; width: 300px; background-color: orange; } .side-left { float: left; } .side-right { float: right; } .mid { float: left; /* width: calc(100%-600px); */ width: calc(100% - 600px); height: 300px; background-color: skyblue; } </style> </head> <body> <! The -- calc() function is used to dynamically calculate the length value. Leave a space before and after the operator, for example: width: calc(100%-10px); --> <div class="output"> <div class="side side-left"></div> <! -- <div class=" mid"></div> --> <div class="side side-right"></div> <div class="mid"></div> </div> <script> </script> </body> </html>Copy the code
The position layout:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style>. height: 300px; position: relative; } .inner { width: 300px; height: 300px; background-color: orange; position: absolute; } .left { left: 0; } .right { right: 0; } .mid { /* left: 300px; width: calc(100% - 600px); */ * * Left: 300px; right: 300px; height: 300px; position: absolute; background-color: lightblue; } </style> </head> <body> <div class="output"> <div class="inner left"></div> <div class="mid"></div> <div class="inner right"></div> </div> <script> </script> </body> </html>Copy the code
Table layout:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < p style>. Outer {display: table; } .inner{ width: 300px; height: 300px; background-color:orange; } .mid{ display: table-cell; background-color:lightblue; /* Inherit the rest of the parent */ width: 100%; } </style> </head> <body> <div class="outer"> <div class="inner left"></div> <div class="inner mid"></div> <div class="inner right"></div> </div> <script> </script> </body> </html>Copy the code
Flex layout:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < p style>. Outer {display: flex; } .inner{ width: 300px; height: 300px; background-color: orchid; } .mid{ /* flex: 1; */ flex: auto; background-color: lightblue; } </style> </head> <body> <div class="outer"> <div class="inner left"></div> <div class="inner mid"></div> <div class="inner right"></div> </div> <script> </script> </body> </html>Copy the code
The grid layout:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < p style>. Outer {display: grid; grid-template-rows: 300px; grid-template-columns:300px auto 300px; The grid-template-columns attribute defines the column width of each column, and the grid-template-rows attribute defines the row height of each row. */ } .inner{ background-color: orange; } .mid{ background-color: lightgoldenrodyellow; } </style> </head> <body> <div class="outer"> <div class="inner left"></div> <div class="inner mid"></div> <div class="inner right"></div> </div> <script> </script> </body> </html>Copy the code