Heim >Web-Frontend >CSS-Tutorial >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
.whole{ width:100%;}
p class="
left"> Behoben links 300px
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;} .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
Methode 2. Verwenden Sie die absolute Positionierung sowohl auf der linken als auch auf der rechten Seite von
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!