Verwenden Sie CSS, um eine feste Breite auf der linken (rechten) Seite und eine Einführung in die adaptive Breitenmethode auf der rechten (linken) Seite zu erreichen

Es ist eine alte Geschichte, CSS ist nicht an das Layout angepasst, egal ob es sich um ein Interview oder die tägliche Arbeit handelt. Es ist sehr verbreitet, deshalb werde ich es heute herausnehmen und darüber 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 und adaptives Layout auf der rechten Seite

*{ Rand: 0; padding:0}

.whole{ width:100%;}

p class="
left"> Behoben links 300px

                                                                                     
Methode 1: Verwenden Sie
float

float auf der linken Seite, geben Sie eine feste Breite und der Abstand vom linken Rand auf der rechten Seite == Breite der linken Ebene CSS-Code: :red}

　.right{

Rand links:300px; Hintergrund:grün; }
Methode 2: LinksAbsolute Positionierung absolut, der Code auf der rechten Seite hat sich nicht geändert oder der Abstand des linken Randes rechts == die Breite der linken Ebene
;

CSS-Code :　.left{

position

: absolute; width:300px; background:red🎜>　.right{ margin-left :300px; grün; }Methode 3 (für persönliche Vorlieben): Absolute Positionierung sowohl auf der linken als auch auf der rechten Seite verwenden, übergeordnete relative Definition (hat keinen Einfluss, es wird empfohlen, eine relative Definition hinzuzufügen, Überschneidungen vermeiden)

　

CSS-Code:

　.left{ position: absolute; width:300px; background:red}

　.right{ position: absolute; left:green; Es ist nicht festgelegt, das richtige Layout ist festgelegt ----- die Methode ist dieselbe, die Position wird nur geändert

                                                                                                                                                                        ;/p> Feste rechte Breite

Methode 1. Verwenden Sie , um auf der linken Seite nach links zu schweben,

rechter Rand == der negative Wert der Breite der rechten Ebene (weil Sie sie offen gelassen haben, mit einem guten Abstand von rechts)

,
Die rechte Seite hat eine schwebende, feste Breite

 .left{ float: left; width:100%; margin-right:-300px; ;Hintergrund: blau;}
Methode 2. Verwenden Sie die absolute Positionierung sowohl auf der linken als auch auf der rechten Seite von

und die relative Definition des übergeordneten Elements (hat keinen Einfluss, empfohlen. Fügen Sie eine relative Definition hinzu, um Überschneidungen zu vermeiden)

 

.left{ position: absolute; left:0; width: 100%; Methode 3 ,

Die Methode zum Löschen von Floats ist auf einen Schlag erklärt 🎜> 1. Separat

Definieren Sie eine Ebene

klar:beide🎜> 2 . Pseudoklassenmethode: nachher (wird auf der Layoutebene der übergeordneten Klasse verwendet) – häufig verwendet 🎜>.father::after,.father::before{ clear: Both; content: „“; >

　

　　

　　flotrgt">

 

3. Das übergeordnete Element setzt Überlauf auf versteckt oder automatisch, eine feste Höhe ist auch möglich - nicht empfohlen

.Vater {Überlauf :hidden; width: 100%; } //overflow:auto;

Das Schreiben ist relativ einfach, mit sehr wenigen schriftlichen Ausdrücken. Es ist ein Code, egal über wie viele Ideen Sie sprechen, lassen Sie den direkten Code nicht funktionieren. Nachdem Sie ihn verwendet haben, werden Sie die Bedeutung verstehen, viel Glück. .

Ergänzung -- Horizontalen Bildschirm verbieten

Das Surfen ist im Hochformat besser!

.orientation-alert{
Hintergrund: rgba(0,0,0,.85);
Position: behoben ;
links: 0;

oben
: 0;Höhe: 100 %;Breite: 100 %;

z-Index
: 1000000;Farbe: #FFF;Anzeige: keine;
}
.orientation-alert p{
Position: absolut;
Breite: 100 %;
oben: 50 %;

Schriftgröße
: 20px;Zeilenhöhe
: 30px;Rand oben
: -15px;text-align
: center;}@media screen and (orientation : Landscape){
.orientation-alert{
display: block;
}
}
@media-Bildschirm und (Ausrichtung: Porträt){
.orientation-alert{
Anzeige: keine;
}
}

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um eine feste Breite auf der linken (rechten) Seite und eine Einführung in die adaptive Breitenmethode auf der rechten (linken) Seite zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!