Detailed explanation of the solution for HTML layout with fixed left and right widths and adaptive middle

This article introduces a detailed explanation of the left and right width fixed middle adaptive HTML layout solution, shared with everyone, as follows:

a. Use floating layout

The html structure is as follows

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>   
//Note here that the left and right floating elements should be rendered first, and then the middle element. After the element is floated, the remaining sibling block-level elements will occupy the width of the parent element <style>
   .box{
        height:200px;
    }    
    .left{
        float:left;
        width:300px;
    }
    .right{
        float:right;
        width:300px;
    }
</style>

b. Use fixed positioning

The html structure is as follows

<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
     <div class="center">center</div>
</div> 
//Similar to the floating layout, render the left and right elements first, so that they are positioned at the left and right ends of the parent element, and the remaining middle elements occupy the remaining width of the parent element.
<style>
    .box{
        position: relative;
      }
      .left{
        position: absolute;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        position: absolute;
        right: 0;
      }
      .center{
        margin: 0 100px;
        background: red;
      }
</style>

c. Table layout

Setting the parent element to display:table and the child element to display:table-cell will turn it into an inline block.

The advantage of this layout is good compatibility.

<div class="box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
<style>
    .box{
        display: table;
        width: 100%;
      }
      .left{
        display: table-cell;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        display: table-cell;
      }
      .center{
        width: 100%;
        background: red;
      }
</style>

d. Flexible layout

The parent element display:flex child elements will all be arranged in a row.

The width of flex:n in the child element will be the width of the parent element/n

If flex:1, the width is equal to the height of the parent element.

The disadvantage of elastic layout is that it is not compatible. Currently, IE browser cannot use elastic layout.

<div class="box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
<style>
    .box{
        display: flex;
        width: 100%;
      }
      .left{
      
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
      }
      .center{
        flex:1;
      }
</style>

e. Grid layout

Parent element display:grid;

grid-templatecolumns:100px auto 100px;

The first child element is 100px wide, the second is adaptive, and the third is 100px wide;

The advantage of grid layout is that it is extremely simple and is directly determined by the parent element style. The disadvantage is that it is not highly compatible.

<div class="box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>
<style>
  .box{
        display: grid;
        grid-template-columns: 100px auto 100px;
        width: 100%;
      }
</style>

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.

<<: How to view the execution time of SQL statements in MySQL

>>: How to let https website send referrer https and http jump referrer