J'essaie d'ajouter une division fixe à gauche de la page Web qui conservera les informations NAVBARD et à droite, j'essaie d'ajouter une autre division. Il ne me permet pas de les mettre côte à côte (celui que je voulais ajouter à la droite se chevauche avec fixe). Comment puis-je les aligner côte à côte?
Voici mon CSS: P>
.left_fixed {
position: fixed;
width: 16%;
top: 0px;
bottom: 0px;
left: 0px;
background-color: #041230;
z-index: 100;
min-width: 170px;
}
.right_side {
position: relative;
width: 100%;
height: 100vh;
}
3 Réponses :
Vous pouvez envelopper les deux divs à l'intérieur d'un parent div, puis ajouter l'affichage Flex au parent div. Cela rendra les deux divs les uns à côté de l'autre, puis vous pouvez ajouter une largeur personnalisée à .left_fixed.
J'ai essayé maintenant mais ça ne montre pas de gauche_fixed comme un élément de flexion et qui se chevauche toujours
Vous devriez supprimer la position: fixe sur .left_fixed
J'en ai besoin pour être corrigé quand j'ai défilé
D'accord, il suffit d'ajouter de la marge-gauche: 16%; à .right_side et ajouter de la hauteur: 100% à .left_fixed. Je vais aussi retirer le dessus: 0, gauche: 0; En bas: 0 de .left_fixed aswell
La raison pour laquelle votre style échoue est que la "position: relative" ne sera pas relative à la "position: fixe".
Pour accomplir l'effet que vous recherchez, je vous suggère d'utiliser Float: laissé sur les deux éléments à la place.
Pas de chance encore :( Je l'ai eu débarrassé de la position: relative sur le droit de droite et ajout du flotteur: laissé aux deux
@Basakulcay. Ce que vous devez faire est d'ajouter "Position: relatif;" et "flotteur: gauche;" à tous les deux :) L'attribut flotteur a besoin de la "position: relative" afin de fonctionner correctement
Comment puis-je garder le côté gauche fixé si j'ajoute par rapport à celui-là aussi? @Zeppo
Je pense que le problème est que je ne comprends pas ce que vous essayez d'accomplir :) En prenant position relative et float à gauche sur 2 objets, ils resteront toujours côte à côte, tant qu'ils sont tous les deux dans le même parent div. Sinon, si ce n'est pas la solution que vous recherchez, veuillez décrire en d'autres termes afin que je puisse mieux comprendre la situation :) @basakulcay
puisque vous définissez un Ensemble suivant A alignez le bon élément à droite en ajoutant J'ai fait l'élément gauche translucide afin que vous puissiez voir qu'il n'y a pas de chevauchement. P> Lire et exécutez l'extrait ci-dessous pour la comprendre en détail. P> PS: j'ai fait l'élément gauche translucide afin que vous puissiez voir qu'il n'y a pas de chevauchement. P> espère qu'il aide forte> p> p> largeur: 16% code> pour l'élément fixe, vous devez définir le reste 84% largeur: 84% code> à l'élément de droite. p>
li>
max-width code> à l'élément de droite car l'élément de gauche a un min-largeur code> j'ai défini ceci sur max-largeur : Calc (100% - 170px) code> p>
li>
float: droite code>. p>
li>
<div class="left_fixed">
<h1>LEFT SIDE</h1>
</div>
<div class="right_side">
<h1>RIGHT SIDE</h1>
</div>
Publier un exemple de reproductible minimal