it-swarm.com.de

Horizontale Regel zwischen <div>

Im Moment habe ich 3 Divs Content1, Content2, Content3

Ich möchte eine einfache stilisierte Regel hinzufügen, um den Inhalt voneinander zu trennen. Hier ist der Code, mit dem ich arbeite.

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>

Ich möchte eine horizontale Regel zwischen Content1 und Content2 und zwischen Content2 und Content3 einfügen.

Ich habe ein Bild beigefügt, damit Sie genau sehen können, was ich meine.

enter image description here

Vielen Dank!

9
Colin

Verwenden Sie nicht <hr>, da dies hauptsächlich ein semantisches Element und keine Präsentation ist. Eine untere Grenze ist dafür ideal. Z.B. 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

Sie können ein hr-Tag verwenden, um Ihre div-Elemente voneinander zu trennen

<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

Sie können den standardmäßigen 3D-Stil eines hr-Tags mit solid border zurücksetzen.

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

wenn Sie kein hr-Tag verwenden möchten. Sie können jedes div mit einem anderen div binden und dekorieren. Wie folgt: Siehe Demo unter: 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>

Und der 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

Versuchen Sie es so 

Demo

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