web-dev-qa-db-fra.com

Règle horizontale entre les <div>

À l'heure actuelle, j'ai 3 divs Content1, Content2, Content3

Je veux ajouter une simple règle stylisée pour séparer le contenu de chacune. Voici le code avec lequel je travaille.

HTML

     <div id="Content1">
     <p><strong>Content1</strong></p>
     </div>

     <div id="Content2">
     <p><strong>Content2</strong></p>
     </div>

     <div id="Content3">
     <p><strong>Content3</strong></p>
     </div>

Je souhaite ajouter une règle horizontale entre Content1 et Content2 et entre Content2 et Content3.

J'ai inclus une image pour que vous puissiez voir exactement ce que je veux dire.

enter image description here

Merci!

htmlcssrule
9
Colin

N'utilisez pas <hr> pour cela, car il s'agit principalement d'un élément sémantique plutôt que de présentation. Une bordure inférieure est idéale pour cela. Par exemple. http://codepen.io/pageaffairs/pen/pjbkA

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div {width: 500px; padding-bottom: 10px; }
#Content1, #Content2 {border-bottom: 3px solid #4588ba; margin-bottom:10px;}
div p {background: #4588ba; line-height: 150px; font-size: 2em; font-family: sans-serif; color: white; margin: 0; padding-left: 30px;}

</style>

</head>
<body>

     <div id="Content1">
     <p><strong>Content1</strong></p>
     </div>

     <div id="Content2">
     <p><strong>Content2</strong></p>
     </div>

     <div id="Content3">
     <p><strong>Content3</strong></p>
     </div>

</body>
</html>
13
ralph.m

Vous pouvez utiliser une balise hr pour séparer vos éléments div

<div id="Content1">
     <p><strong>Content1</strong></p>
</div>
<hr />
     <div id="Content2">
     <p><strong>Content2</strong></p>
</div>
<hr />
<div id="Content3">
     <p><strong>Content3</strong></p>
</div>

Demo

Vous pouvez réinitialiser le style 3D par défaut d'une balise hr à l'aide de bordure pleine 

hr {
    margin: 20px 0;
    border: 1px solid #f00;
}
4
Mr. Alien

si vous ne voulez pas utiliser la balise hr. vous pouvez lier chaque div avec un autre et le décorer. Comme ceci: Voir la démo à l’adresse: jsfiddle

<div id="Content1" class="divOutside">
    <div class="divInside">
        <strong>Content1</strong>       
    </div>
</div>
<div id="Content2" class="divOutside">
    <div class="divInside">
       <strong>Content2</strong>        
    </div>
</div>
<div id="Content3" class="divOutside last">
    <div class="divInside">
       <strong>Content3</strong>     
    </div>
</div>

Et le Css:

.divOutside {
    border-bottom:2px blue solid;
    width:200px;
    padding-bottom:5px;
    padding-top:5px;
}
.divInside {
    width:200px;
    height:80px;
    color:#fff;
    background-color:blue;
}
.last {
    border-bottom:0;
}
3
JamesN

Essayez comme ça 

démo

HTML

<div id="Content1" class="content">
     <p><strong>Content1</strong></p>
</div>
<div class="break"></div>
     <div id="Content2" class="content">
     <p><strong>Content2</strong></p>
</div>
<div class="break"></div>
     <div id="Content3" class="content">
     <p><strong>Content3</strong></p>
</div>

CSS

.content {
    padding:20px;
    background:#3E87BC;
    font-size: 24px;
    margin-bottom:10px;
    font-family: Arial;
    color: #FFF;
}
.break { 
    background: #3E87BC;
    height: 2px;
    margin: 5px 0 10px 0;
    width: 100%;
}
2
Nauphal
<div id="Content1" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content1</strong></p>
</div>
<div id="Content4" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content2" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content2</strong></p>
</div>
<div id="Content5" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
<div id="Content3" style="background-color:#2554C7;width:300px;height:50px;">
<p style="padding-left:40px;padding-top:10px;color:white;font-size:26px;"><strong>Content3</strong></p>
</div>
<div id="Content6" style="background-color:#2554C7;width:300px;height:5px;">
<hr style="color:#2554C7;"></hr>
</div>
0
Mohan Shanmugam