CSS implementiert eine feste Breite auf der linken (rechten) Seite und eine adaptive Breite auf der rechten (linken) Seite --- Clear Floating

Es ist eine alte Geschichte, CSS ist nicht an das Layout angepasst, egal ob es sich um ein Vorstellungsgespräch oder die tägliche Arbeit handelt. Es ist sehr verbreitet, deshalb werde ich es heute herausnehmen und darüber zu plaudern, sowohl für mich selbst als auch als Referenz zum Lernen und Festigen. Da man weiß, dass es jeder weiß, muss man es sich merken, und zwar aus keinem anderen Grund, als um eine solide Grundlage zu schaffen.

Es gibt zu viel zu sagen, gehen Sie einfach zum Code und Sie werden ihn auf einen Blick verstehen. Vielleicht werden Sie es als einfach abtun, aber ich schreibe gerne etwas. . . . . . Als Neuling muss man sich die Grundlagen intensiv aneignen.

Es gibt viele Methoden, die Sie hinzufügen können, vielen Dank! !

1. Festes Layout auf der linken Seite, adaptives Layout auf der rechten Seite

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">固定左侧 300px</div>
        <div class="right">右侧自适应</div>
 </div>

Methode 1: Verwenden Sie Float, um auf der linken Seite zu schweben, geben Sie eine feste Breite an, den Abstand des linken Randes auf der rechten == linken Ebene Die Breite des

CSS-Codes:

　　　　.left{ float:left;width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

Methode 2: Absolute Positionierung links, der Code rechts hat sich nicht geändert oder das Abstand des linken Randes rechts == die Breite der linken Ebene;

CSS-Code:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ margin-left:300px; background:green; width:100%}

Methode 3 (persönliche Präferenz): Verwenden Sie die absolute Positionierung sowohl links als auch rechts Seiten, relative Definition des übergeordneten Elements (hat keinen Einfluss, es wird empfohlen, eine relative Definition hinzuzufügen, um Überschneidungen zu vermeiden)

CSS-Code:

　　　　.left{ position: absolute; left:0; width:300px; background:red}
　　　　.right{ position: absolute; left:300px; background:green; width:100%}

2. Das linke Layout ist nicht festgelegt , das rechte Layout ist festgelegt ----- Die Methode ist dieselbe, ändern Sie einfach die Position

   <div class="whole">
        <p>自适应测试</p>
           <div class="left">左侧自适应</div>
        <div class="right">右侧宽度固定</div>
  </div>

Methode 1. Verwenden Sie den linken Float auf der linken Seite, den rechten Rand == den negativen Wert des Breite der rechten Ebene (da Sie sie auf der linken Seite öffnen, ist der Abstand von der rechten Ebene gut) und auf der rechten Seite schweben, feste Breite

      .left{ float:left; width:100%; margin-right:-300px; background: red; }
　　.right{ float: right; width: 300px;background: blue;}

Methode 2, absolute Positionierung verwenden sowohl auf der linken als auch auf der rechten Seite, relative übergeordnete Definition (hat keinen Einfluss, es wird empfohlen, eine relative Definition hinzuzufügen, um Überschneidungen zu vermeiden)

       .left{ position: absolute; left:0;  width: 100%;  background: red;}
　　.right{ position: absolute;  left:200px; width:200px; background: green;}

Methode 3,

Die Methode zum Löschen von Floats kann auf einen Schlag erklärt werden

1. Definieren Sie eine separate Ebene unter der Floating-Ebene

2. Pseudo -Klassenmethode: nachher (wird auf der Layoutebene der übergeordneten Klasse verwendet) – häufig verwendet

         .father::after,.father::before{ clear: both; content: ""; display: table;}
  　　 <div class=&#39;father&#39;>
       　　 <div class="son-flotleft"></div>
　　　　　<div class="son-flotrgt"></div>
  　　 </div>

3. Stellen Sie den Überlauf des übergeordneten Elements auf ausgeblendet oder automatisch ein. Sie können auch eine feste Höhe verwenden – nicht empfohlen

        .father{overflow:hidden; width: 100%; }　  //overflow:auto; height:300px;