Heim > Artikel > Web-Frontend > Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite

Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite

高洛峰Original: 2017-03-08 15:02:481991Durchsuche

Das linke, mittlere und rechte dreispaltige Seitenlayout ist sehr verbreitet. Hier werfen wir einen Blick auf die Anwendungsbeispiele des dreispaltigen CSS-Layouts mit fester Breite, einschließlich der Anordnungsmethode mit gleicher Breite und gleichem Abstand:

Dreispaltiges Layout mit fester Breite
Das ist sehr einfach. Wir können es direkt verstehen, indem wir uns den Code ansehen:

<p id="wrapper">
 <p id="header">header</p>
 <p id="body" class="cls">
  <p id="aside">
   <p class="inner">
    aside   
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </p>
  </p>
  <p id="content" class="cls">
   <p id="main">
    <p class="inner">
     main   
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
   </p>
   <p id="content-aside">
    <p class="inner">
     content-aside   
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </p>
   </p>
  </p>
 </p>
 <p id="footer">footer</p>
</p>

#header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}   
#body{ width: 980px; margin: 0 auto;}   
#aside{ float: left; width: 240px; background: #ccc;}   
#content{ margin-left: 240px;}   
#main{ float: left; width: 540px; background: pink;}   
#content-aside{  float: left; width: 200px; background: orange; }   
#footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}

Beispiel: Drei Bildspalten mit gleicher Breite und gleichem Abstand realisieren

Jeder Bildblock schwebt nach links, 30 % breit, und 2,5 % linker Rand:
100 %=(2,5 % +30 %)+(2,5 %+30 %)+(2,5 %+30 %)+2,5 %

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">    
<title>三列图片等宽布局</title>    
<style>    
* {    
    margin: 0;    
    padding: 0;    
}    
img {    
    display: block;    
    width: 30%;    
    margin: 2.5% 0 0 2.5%;    
    float: left;    
}    
</style>    
</head>    
<body>    
<p>    
<img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" ><img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" ><img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" >    
<img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" ><img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" ><img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" >    
<img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" ><img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" ><img  src="byd.jpg" / alt="Detaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite" >    
</p>        
</body>    
</html>

Breite: 30 %; 30 stellt die Breite des übergeordneten Elements dar.
Höhe: 30 %. Wenn die spezifische Höhe des übergeordneten Elements nicht festgelegt ist, hat diese Höhe keine Auswirkung Für ein responsives Quadrat können Sie die Einheit vw (Viewport-Breite) verwenden:

.square {    
    width: 30%;    
    height: 30vw;    
    background: url("byd.jpg") no-repeat scroll center 0 transparent;    
    background-size: 100% 100%;    
    margin: 2.5% 0 0 2.5%;    
    float: left;    
}

Es ist jedoch zu beachten, dass niedrigere Versionen von IE und niedrigere Versionen von Android/iOS-Browsern dies tun Unterstützt die Ansichtsfenstereinheit nicht.

Oder verwenden Sie JS, um die Höhe entsprechend der Breite festzulegen, um die Kompatibilität sicherzustellen:

<script src="jquery.js"></script>    
<script>    
$(document).ready(function(){    
    $("img").height($("img").width());    
});    
$(window).resize(function(){    
    $("img").height($("img").width());    
});    
</script>

Prozentsatzlayout kann auch als responsives Layout betrachtet werden.

Das einfache und praktische prozentuale Layout eignet sich immer noch sehr gut für das mobile WAP-Seitenlayout:

min-width:320px;    
max-width:980px;    
width:100%;    
overflow-x: hidden;    
margin: 0 auto;

Die minimale Breite beträgt 320 Pixel, die maximale Breite beträgt 980 Pixel und die Breite wird automatisch angepasst passt sich zwischen 320px und 980px an, was in Ordnung aussieht.

Legen Sie nur die Breite im Attribut-Prozentwert fest, z. B. width="40%", damit das Bild nicht festgelegt werden kann kann entsprechend dem ursprünglichen Verhältnis skaliert werden.
Die Blöcke im Container können auch mit Prozentsätzen angeordnet werden, z. B. 60 % links und 40 % rechts.

Das obige ist der detaillierte Inhalt vonDetaillierte Anweisungen zur Verwendung des dreispaltigen CSS-Layouts mit fester Breite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie CSS, um eine schöne Methode zur Formularübermittlung zu implementierenNächster Artikel：Verwenden Sie CSS, um eine schöne Methode zur Formularübermittlung zu implementieren

In Verbindung stehende Artikel

Mehr sehen