Detaillierte Erklärung der Lösung für HTML-Layout mit festen linken und rechten Breiten und adaptiver Mitte

<div Klasse="Box">
    <div Klasse="links">links</div>
    <div class="right">richtig</div>
    <div class="center">Mitte</div>
</div>   
//Beachten Sie hier, dass zuerst die linken und rechten schwebenden Elemente und dann das mittlere Element gerendert werden sollten. Nachdem das Element schweben gelassen wurde, nehmen die verbleibenden Geschwisterelemente auf Blockebene die Breite des übergeordneten Elements ein <style>
   .Kasten{
        Höhe: 200px;
    }    
    .links{
        schweben: links;
        Breite: 300px;
    }
    .Rechts{
        schweben: rechts;
        Breite: 300px;
    }
</Stil>

<div Klasse="Box">
    <div Klasse="links">links</div>
    <div class="right">richtig</div>
     <div class="center">Mitte</div>
</div> 
//Ähnlich wie beim schwebenden Layout werden zuerst die linken und rechten Elemente gerendert, sodass sie an den linken und rechten Enden des übergeordneten Elements positioniert sind und die verbleibenden mittleren Elemente die verbleibende Breite des übergeordneten Elements einnehmen.
<Stil>
    .Kasten{
        Position: relativ;
      }
      .links{
        Position: absolut;
        Breite: 100px;
        links: 0;
      }
      .Rechts{
        Breite: 100px;
        Position: absolut;
        rechts: 0;
      }
      .Center{
        Rand: 0 100 px;
        Hintergrund: rot;
      }
</Stil>

<div Klasse="Box">
  <div Klasse="links">
    links
  </div>
  <div Klasse="Mitte">
    Center
  </div>
  <div Klasse="rechts">
    Rechts
  </div>
</div>
<Stil>
    .Kasten{
        Anzeige: Tabelle;
        Breite: 100 %;
      }
      .links{
        Anzeige: Tabellenzelle;
        Breite: 100px;
        links: 0;
      }
      .Rechts{
        Breite: 100px;
        Anzeige: Tabellenzelle;
      }
      .Center{
        Breite: 100 %;
        Hintergrund: rot;
      }
</Stil>

<div Klasse="Box">
  <div Klasse="links">
    links
  </div>
  <div Klasse="Mitte">
    Center
  </div>
  <div Klasse="rechts">
    Rechts
  </div>
</div>
<Stil>
    .Kasten{
        Anzeige: Flex;
        Breite: 100 %;
      }
      .links{
      
        Breite: 100px;
        links: 0;
      }
      .Rechts{
        Breite: 100px;
      }
      .Center{
        biegen: 1;
      }
</Stil>

<div Klasse="Box">
  <div Klasse="links">
    links
  </div>
  <div Klasse="Mitte">
    Center
  </div>
  <div Klasse="rechts">
    Rechts
  </div>
</div>
<Stil>
  .Kasten{
        Anzeige: Raster;
        Rastervorlagenspalten: 100px automatisch 100px;
        Breite: 100 %;
      }
</Stil>