J'ai une mise en page où l'ensemble du contenu doit prendre le p > max-largeur code> de 1440px code>. Dans la mise en page, j'ai une barre d'applications avec 2 colonnes chacune à une extrémité et 2 colonnes dans la partie de contenu de la page. Un plus petit servant de tiroir, l'autre prenant le reste de l'espace. Le contenu de cette 2 colonnes doit être aligné sur le contenu de la barre d'applications. Je ne sais pas comment faire ce genre de mise en page, car les 2 colonnes du contenu doivent également avoir une couleur d'arrière-plan code> différente code>, j'ai essayé quelque chose comme celui-ci pour la mise en page:
<div class="app-bar">
<div class="bar-content">
<div class="left-part">
<p>link</p>
</div>
<div class="right-part">
<p>user</p>
</div>
</div>
</div>
<div class="container">
<div class="drawer-wrapper">
<div class="drawer">
<p>Some link</p>
<p>Some link</p>
<p>Some link</p>
<p>Some link</p>
</div>
</div>
<div class="main-wrapper">
<div class="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
3 Réponses :
.drawer p {
margin-top: 0px;
}
add this in css, will make it aligned with each other.
Selon votre commentaire, j'ai modifié votre code. S'il vous plaît laissez-moi savoir si vous recherchez la même
p>
<div class="holder">
<div class="container-nav">
<div class="">
<p>link</p>
</div>
<div style="padding:0px 24px">
<p>user</p>
</div>
</div>
<div class="container">
<div class="drawer-wrapper">
<div class="drawer">
<p>Some link</p>
<p>Some link</p>
<p>Some link</p>
<p>Some link</p>
</div>
</div>
<div class="main-wrapper">
<div class="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
</div>Je voudrais éviter d'avoir des marges autour de la page
Vous pouvez réinitialiser les marges par défaut à l'aide de * {margin: 0} Avant de commencer le projet en tant que Paulie mentionné dans le commentaire
Je pense que j'obtiens ce que tu veux dire maintenant. Tout d'abord, vous devez donner .Container la même max-largeur que votre contenu .Bar-Bar (max-largeur: 1440px et marge: 0 auto). Ajoutez ensuite ces règles:
<div class="container-bg">
<div class="container">...</div>
</div>
.container {
max-width: 1440px;
margin:0 auto;
}
.container-bg {
background: linear-gradient(90deg, #ececec 50%, blue 50%);
}
Fondamentalement, vous voulez que la barre de barre latérale gauche prend le reste de l'espace à gauche avec sa propre couleur, le reste du contenu prendra le reste de l'espace à droite avec sa propre couleur de fond, également? Mais à la fois de la barre de gauche et du contenu doit être centrée et ne se développera qu'à la largeur maximale, n'est-ce pas?
Qu'entendez-vous par contenu de 2 colonnes non alignées sur le contenu de
app-bar ? Comme je le vois, il n'y a pas de contenu dans leapp-bar .Driez-vousQuelques lien pour être aligné sous leNAVBAR-LINK ?En effet, une idée de ce que cela est censé ressembler serait utile ... mais je commencerais avec une réinitialisation CSS appropriée pour supprimer Toutes les marges par défaut .
@SaimanoJ Oui, je veux que le lien et l'utilisateur de la barre d'applications soient alignés sur le contenu des 2 colonnes.