J'essaie de créer la mise en page suivante pour l'un de mes projets Web. Quelle est la meilleure façon de créer cela en utilisant HTML, CSS (Flex)?
Je me débats avec une marge inférieure pour C & D dans des écrans de bureau, pour D dans des écrans mobiles.
4 Réponses :
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here A</p>
</div>
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here B</p>
</div>
</div>
<div class="cs-t20">
<!-- spacer -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here C</p>
</div>
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here D</p>
</div>
</div>
<div class="cs-t20">
<!-- spacer -->
</div>
</div>
<style>
.cs-t20{
width: 100%;
height: 30px;
}
</style>
Hope it will help you!! All the Best !!
Donc, vous en avez besoin dans Pure HTML, CSS?
Je n'ai pas besoin, mais je crois que op fait :)
Vous pouvez le faire comme ça.
p>
<div class="main_container"> <div class="sections">A</div> <div class="sections">B</div> <div class="sections">C</div> <div class="sections">D</div> </div>
OP doit utiliser Flexbox, pas la grille :)
Comme nous n'avons pas votre code, si basé sur votre question ici, je fournis une solution permettez-moi de savoir si vous avez des questions ..
p>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 mb-5">
<div class="card p-5">
A
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
B
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
C
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
D
</div>
</div>
</div>
</div> <div id="webpage_section">
<div class="container">
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">
<p>Write text here A</p>
</div>
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
<p>Write text here B</p>
</div>
<div class="cs-t20"></div>
</div>
</div>
<div id="webpage_section">
<div class="container">
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">
<p>Write text here C</p>
</div>
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
<p>Write text here D</p>
</div>
<div class="cs-t20"></div>
</div>
</div>
Montre-nous Quel code vous avez jusqu'à présent.
"Je me débats avec la marge inférieure pour C & D dans les écrans de bureau, pour D dans des écrans mobiles." - Spécifier le général
Marge-bas: 30px pour les éléments, écrase à l'intérieur de la requête de média mobile pour le: dernier enfant , et ... fait?Vous êtes censé fournir un exemple de reproductible minimal , pas d'images.