Heim > Artikel > Web-Frontend > Links fest, rechts adaptiv

Links fest, rechts adaptiv

高洛峰Original: 2017-02-24 13:39:041134Durchsuche

In diesem Artikel werden hauptsächlich die beiden Implementierungsmethoden der festen linken Seite und der adaptiven rechten Seite vorgestellt. Ich glaube, dass es für jeden sehr hilfreich sein wird, das Webseiten-Layout zu erlernen.

Erste Methode:

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第一种方法</p>
</body>
</html>

Zweite Methode:

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第二种方法</p>
</body>
</html>

Weitere Artikel zum Thema „Linksseite fest“ und „Rechtsseite adaptiv“ finden Sie auf der chinesischen PHP-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：So zentrieren Sie horizontal und vertikal absolut positionierte ElementeNächster Artikel：So zentrieren Sie horizontal und vertikal absolut positionierte Elemente

In Verbindung stehende Artikel

Mehr sehen