recherche

Maison >interface Web >tutoriel CSS >Côté gauche fixe, disposition adaptative sur le côté droit

Côté gauche fixe, disposition adaptative sur le côté droit

php中世界最好的语言
php中世界最好的语言original
2018-03-22 15:22:282290parcourir

Cette fois, je vais vous présenter la méthode de disposition du côté gauche fixe et du côté droit adaptatif. Quelles sont les précautions concernant la méthode de disposition du côté gauche fixe et du côté droit adaptatif. Voici les cas réels. jetez un oeil.

La première méthode : 

<!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>

La deuxième méthode : 

<!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>

Je crois que vous avez lu cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation des effets visuels CSS3

Explication détaillée du chargement dynamique des CSS

Comment utiliser la propriété webkit-tap-highlight-color de CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：La différence entre width:100% et width:autoArticle suivant：La différence entre width:100% et width:auto

Articles Liés

Voir plus