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

Mar 22, 2018 pm 03:22 PM
右侧 布局

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>
Copier après la connexion

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>
Copier après la connexion

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage Aug 22, 2023 am 10:13 AM

Dans Windows 11, le menu Démarrer a été repensé et propose un ensemble simplifié d'applications disposées dans une grille de pages, contrairement à son prédécesseur, qui comportait des dossiers, des applications et des applications dans le groupe du menu Démarrer. Vous pouvez personnaliser la disposition du menu Démarrer, l'importer et l'exporter vers d'autres appareils Windows pour la personnaliser à votre guise. Dans ce guide, nous discuterons des instructions étape par étape pour importer la disposition de démarrage afin de personnaliser la disposition par défaut sur Windows 11. Qu’est-ce qu’Import-StartLayout dans Windows 11 ? Import Start Layout est une applet de commande utilisée dans Windows 10 et les versions antérieures pour importer les personnalisations du menu Démarrer dans

Comment enregistrer la disposition de la position des icônes du bureau dans Windows 11 Comment enregistrer la disposition de la position des icônes du bureau dans Windows 11 Aug 23, 2023 pm 09:53 PM

Windows 11 apporte beaucoup à la table en termes d'expérience utilisateur, mais l'itération n'est pas entièrement à l'épreuve des erreurs. Les utilisateurs rencontrent des problèmes de temps en temps et les modifications apportées au positionnement des icônes sont courantes. Alors, comment enregistrer la disposition du bureau dans Windows 11 ? Il existe des solutions intégrées et tierces pour cette tâche, qu'il s'agisse d'enregistrer la résolution d'écran de la fenêtre actuelle ou la disposition des icônes du bureau. Cela devient encore plus important pour les utilisateurs qui ont de nombreuses icônes sur leur bureau. Lisez la suite pour savoir comment enregistrer les emplacements des icônes du bureau dans Windows 11. Pourquoi Windows 11 n’enregistre-t-il pas les positions de disposition des icônes ? Voici les principales raisons pour lesquelles Windows 11 n'enregistre pas la disposition des icônes du bureau : Modifications des paramètres d'affichage : Généralement, lorsque vous modifiez les paramètres d'affichage, les personnalisations configurées

Que faire si la barre des tâches Win7 s'affiche dans la fenêtre droite du bureau Que faire si la barre des tâches Win7 s'affiche dans la fenêtre droite du bureau Jun 29, 2023 pm 07:41 PM

Que dois-je faire si la barre des tâches Win7 s'affiche dans la fenêtre sur le côté droit du bureau ? Dans des circonstances normales, la barre des tâches se trouve par défaut en bas de l'écran, mais récemment, certains utilisateurs de Win7 ont constaté que la barre des tâches s'était déplacée vers la fenêtre droite de l'écran lorsqu'ils allumaient l'ordinateur. Existe-t-il donc un moyen de la modifier à nouveau. ? De nombreux amis ne savent pas comment fonctionner en détail. L'éditeur ci-dessous a compilé les étapes pour résoudre le problème de l'affichage de la barre des tâches Win7 dans la fenêtre sur le côté droit du bureau. Si vous êtes intéressé, suivez l'éditeur et jetez-y un œil. regarde ci-dessous ! La barre des tâches Win7 s'affiche dans la fenêtre sur le côté droit du bureau. Étapes de la solution 1. Tout d'abord, nous cliquons avec le bouton droit sur la barre des tâches dans la fenêtre sur le côté droit du bureau et sélectionnons Propriétés, comme indiqué dans la figure ci-dessous : 2. Dans la barre des tâches et la fenêtre des propriétés ouvertes, cliquez sur la barre des tâches à l'écran. Sélectionnez l'emplacement inférieur, cochez Verrouiller la barre des tâches et cliquez sur

Guide pour résoudre le désalignement des pages Web WordPress Guide pour résoudre le désalignement des pages Web WordPress Mar 05, 2024 pm 01:12 PM

Guide pour résoudre les pages Web WordPress mal alignées Dans le développement de sites Web WordPress, nous rencontrons parfois des éléments de page Web mal alignés. Cela peut être dû à des tailles d'écran sur différents appareils, à la compatibilité du navigateur ou à des paramètres de style CSS inappropriés. Pour résoudre ce désalignement, nous devons analyser soigneusement le problème, trouver les causes possibles, puis le déboguer et le réparer étape par étape. Cet article partagera certains problèmes courants de désalignement des pages Web WordPress et les solutions correspondantes, et fournira des exemples de code spécifiques pour aider à développer

Comment créer une mise en page carrousel réactive en utilisant HTML et CSS Comment créer une mise en page carrousel réactive en utilisant HTML et CSS Oct 20, 2023 pm 04:24 PM

Comment créer une mise en page de carrousel réactif à l'aide de HTML et CSS Les carrousels sont un élément courant dans la conception Web moderne. Il peut attirer l'attention de l'utilisateur, afficher plusieurs contenus ou images et basculer automatiquement. Dans cet article, nous expliquerons comment créer une mise en page carrousel réactive en utilisant HTML et CSS. Tout d’abord, nous devons créer une structure HTML de base et ajouter les styles CSS requis. Ce qui suit est une structure HTML simple : &lt;!DOCTYPEhtml&g

Compétences d'application flexibles de l'attribut de poste en H5 Compétences d'application flexibles de l'attribut de poste en H5 Dec 27, 2023 pm 01:05 PM

Comment utiliser de manière flexible l'attribut position dans H5. Dans le développement H5, le positionnement et la disposition des éléments sont souvent impliqués. A ce moment, la propriété CSS position entrera en jeu. L'attribut position peut contrôler le positionnement des éléments sur la page, y compris le positionnement relatif (relatif), le positionnement absolu (absolu), le positionnement fixe (fixe) et le positionnement collant (collant). Cet article présentera en détail comment utiliser de manière flexible l'attribut position dans le développement H5.

Présentation de la méthode de disposition des fenêtres dans Win7 Présentation de la méthode de disposition des fenêtres dans Win7 Dec 26, 2023 pm 04:37 PM

Lorsque nous ouvrons plusieurs fenêtres en même temps, win7 a pour fonction d'organiser plusieurs fenêtres de différentes manières puis de les afficher en même temps, ce qui nous permet de visualiser plus clairement le contenu de chaque fenêtre. Alors, combien de dispositions de fenêtres y a-t-il dans Win7 ? À quoi ressemblent-elles ? Il existe plusieurs façons d'organiser les fenêtres de Windows 7 : trois, à savoir les fenêtres en cascade, les fenêtres d'affichage empilées et les fenêtres d'affichage côte à côte. Lorsque nous ouvrons plusieurs fenêtres, nous pouvons cliquer avec le bouton droit sur un espace vide de la barre des tâches. Vous pouvez voir trois dispositions de fenêtres. 1. Fenêtres empilées : 2. Fenêtres d’affichage empilées : 3. Fenêtres d’affichage côte à côte :

Scénarios d'utilisation de la syntaxe de contain en CSS Scénarios d'utilisation de la syntaxe de contain en CSS Feb 21, 2024 pm 02:00 PM

Scénarios d'utilisation de la syntaxe de contain en CSS En CSS, contain est un attribut utile qui spécifie si le contenu d'un élément est indépendant de son style et de sa mise en page externes. Il aide les développeurs à mieux contrôler la mise en page et à optimiser les performances. Cet article présentera les scénarios d'utilisation de la syntaxe de l'attribut contain et fournira des exemples de code spécifiques. La syntaxe de l'attribut contain est la suivante : contain:layout|paint|size|style|'none'|'stric

See all articles