Comment puis-je séparer chaque div?

-1

Je voudrais séparer (espacer) chaque div. Si je donne une marge, un div passe à la ligne suivante. Comment puis-je conserver 3 cases avec de l'espace dans la même ligne? De quoi ai-je besoin pour écrire en CSS?Comment puis-je séparer chaque div?

J'ai structre html de base:

<div class="col-lg-4 col-md-6"> <section class="a"> A Title </section> <p>Lorem ipsum dolor sit amet,</p></div> 
<div class="col-lg-4 col-md-6"> <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet,</p></div> 
<div class="col-lg-4 col-md-12"> <section class="C"> C </section> <p>Lorem ipsum dolor sit amet,</p></div>

lg-4: 33,33%
MD-6: 50%

Source

2017-10-17 newbie35

Partagez votre code aussi –

Peut-être que vous devriez passer à quelque chose de plus flexible que cette grille et essayer les flexbox? https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – sjahan

Essayez d'appliquer Padding. – Sagar

Fo Heureusement, vous n'avez pas à écrire de CSS supplémentaire pour cela. Le plus simple est d'aller avec bootstrap, ce pen le démontre.

Après la classe d'amorçage, il suffit d'ajouter un conteneur pour les enfants directs que vous avez à l'intérieur col-lg-4 et utilisez le rembourrage ou la marge, il sera toujours à l'intérieur du col-lg-4

<div class="row"> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="a"> A Title </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-4"> 
    <div class="section"> 
     <section class="C"> C </section> <p>Lorem ipsum dolor sit amet,</p> 
    </div> 
    </div> 
</div>

Source

2017-10-17 07:54:53

Vous devez ajouter de l'espace réservé dans le "col" pourrait être jusqu'à 12 dans une « ligne » donc si vous utilisez « col-atterrisseur-4 » est pas assez d'espace à la marge, vous devez définir « marge » pour conteneur div et ajouter plus divs en interne, comme ceci:

<div class="col-lg-4" style="padding-left: 5px"> 
    <div calss="box col-lg-12"> 
     <!-- Data with padding --> 
    </div> 
</div>

Source

2017-10-17 07:53:41 Alex

Je ne devrais pas utiliser inline-block. Je dois cette forme:

Voici mon code HMTL:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Example - 1</title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <h1> Our Menu </h1> 

<div class="col-lg-4 col-md-6"> <section class="a"> A title</section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div> 
<div class="col-lg-4 col-md-6"> <section class="b"> B Title </section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div> 
<div class="col-lg-4 col-md-12"> <section class="c"> C Title </section> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div> 

</body> 
</html>

Voici mon fichier CSS:

*{ 
    font-family: Comic Sans MS, cursive, sans-serif; 
    box-sizing: border-box; 

} 

h1 { 
    text-align: center; 
} 

div{ 

    background-color: gray; 
    float: left; 

} 
p{ 

    padding: 5px; 
    float: left;  

} 

section{ 
    width: 110px; 
    border: solid 1px black; 
    text-align: center; 
    font-weight: bold; 
    float: right; 

} 

.a{ 
    background-color:#D59898; 
} 

.b{ 
    background-color:#C14543; 
    color: white; 
} 

.c{ 
    background-color:#E5D198; 
} 

@media (min-width: 992px) { 
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 
    float: left; 
    border: 2px solid black; 
    } 
    .col-lg-1 { 

    width: 8.33%; 
    } 
    .col-lg-2 { 
    width: 16.66%; 
    } 
    .col-lg-3 { 
    width: 25%; 
    } 
    .col-lg-4 { 
    width: 33.33%; 
    } 
    .col-lg-5 { 
    width: 41.66%; 
    } 
    .col-lg-6 { 
    width: 50%; 
    } 
    .col-lg-7 { 
    width: 58.33%; 
    } 
    .col-lg-8 { 
    width: 66.66%; 
    } 
    .col-lg-9 { 
    width: 74.99%; 
    } 
    .col-lg-10 { 
    width: 83.33%; 
    } 
    .col-lg-11 { 
    width: 91.66%; 
    } 
    .col-lg-12 { 
    width: 100%; 
    } 
} 
/********** Tablet devices only **********/ 
@media (min-width: 768px) and (max-width: 991px) { 
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
    float: left; 
    border: 2px solid black; 
    } 
    .col-md-1 { 
    width: 8.33%; 
    } 
    .col-md-2 { 
    width: 16.66%; 
    } 
    .col-md-3 { 
    width: 25%; 
    } 
    .col-md-4 { 
    width: 33.33%; 
    } 
    .col-md-5 { 
    width: 41.66%; 
    } 
    .col-md-6 { 
    width: 50%; 
    } 
    .col-md-7 { 
    width: 58.33%; 
    } 
    .col-md-8 { 
    width: 66.66%; 
    } 
    .col-md-9 { 
    width: 74.99%; 
    } 
    .col-md-10 { 
    width: 83.33%; 
    } 
    .col-md-11 { 
    width: 91.66%; 
    } 
    .col-md-12 { 
    width: 100%; 
    } 
}

Source

2017-10-17 07:57:14 newbie35

Comment puis-je séparer chaque div?

Répondre

Questions connexes