Wie man vertikale Linie in css

Wie man diese Fußzeile machen? Beispiel in diesem Foto Wie man vertikale Linie in css

2016-03-19 Nelixus

Mögliche Duplikat http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html – Michael

aber ich brauche 3 in einem div? – Nelixus

Sie können "border-left: 1px solid # 000" auf Ihre divs css setzen – Farshid

Einfachster Weg, den ich mir vorstellen kann. Sie müssten den Code anpassen, der für das gewünschte responsive Design erforderlich ist.

Jsfiddle.

HTML

<div></div> 
<div></div> 
<div></div>

CSS

div { 
    width: 200px; 
    height: 100px; 
    background-color: gold; 
    border-left: solid 2px #cdcdcd; 
    float: left; 
}

Quelle

2016-03-19 16:36:34 Zakalwe

Wenn Sie müssen, können Sie es mit einem Hintergrundbild mit festen Linien tun.

Wenn Sie es richtig machen wollen, werden Sie definitiv mehrere divs brauchen, um das zu tun. Hier ist eine Möglichkeit:

.column{ 
 
    width:30%; 
 
    height:100px; 
 
    padding:1.5%; 
 
    float:left; 
 
    border-right:1px solid grey; 
 
} 
 

 
.column:last-child{ 
 
border-right: none; 
 
} 
 

 
.footer{ 
 
    border:1px solid grey; 
 
    overflow:auto; 
 
}

<div class="footer"> 
 

 
    <div class="column" > 
 
    blah 
 
    </div> 
 
    
 
    <div class="column" > 
 
    blah 
 
    </div> 
 

 
    <div class="column" > 
 
    blah 
 
    </div> 
 
    
 
</div>

Quelle

2016-03-19 16:36:37 Miro

danke kerl für helping :) – Nelixus

Versuchen Sie, diese Probe:

<div style="background-color: green; width: 100%;float: right"> 
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right"> 
    </div> 
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right"> 
    </div> 
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right"> 
    </div> 
</div>

Quelle

2016-03-19 16:36:47 Farshid

Es ist eine schlechte Angewohnheit mit in-line CSS –

Natürlich wollte ich nur ein Beispiel geben. – Farshid

Firt Sie fügen Klasse in diesen drei divs ..

<div class='border'>AAAA</div> 
<div class='border'>BBB</div> 
<div class='border'>CCC</div>

dann fügen Sie CSS Teil

.border{ 

border-left: solid 2px #cdcdcd; 

}

Sie arrangieren Margen auch ...

Quelle

2016-03-19 17:21:48

dies Ihr problem.try dies lösen und versuchen, die Vorschau mit voller Seite

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title>Test</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
</head> 
 
<style type="text/css"> 
 
body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div.myfooter{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 300px; 
 
    background-color:#81C41D; 
 
    color: white; 
 
    font-family: monospace; 
 
    font-size: 20px; 
 
} 
 

 
div.one{ 
 
    width:35%; 
 
    height:100%; 
 
    border-right: 1px solid green; 
 
    position: absolute; 
 
    left: 0; 
 
    text-align: right; 
 
} 
 
div.two{ 
 
    width: 20%; 
 
    height: 100%; 
 
    border-right: 1px solid green; 
 
    position: absolute; 
 
    left: 35%; 
 
    text-align: center; 
 
} 
 
div.three{ 
 
    width: 22.5%; 
 
    height: 100%; 
 
    border-right: 1px solid green; 
 
    position: absolute; 
 
    left: 55%; 
 
    text-align: center; 
 
} 
 

 
div.four 
 
{ 
 
    width: 26.5%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 72.5%; 
 
    text-align: center; 
 

 
} 
 

 
</style> 
 
<body> 
 

 
<div class="myfooter"> 
 
<div class="one"><h3>Section One</h3></div> 
 
<div class="two"><h3>Sectioin Two</h3></div> 
 
<div class="three"><h3>Section Three</h3></div> 
 
<div class="four"><h3>Section Four</h3></div> 
 
</div> 
 

 

 
</body> 
 
</html>

Quelle

2016-03-19 17:53:42

Wenn Sie in Ordnung sind mit der Verwendung von css3, hier ist Ihre Lösung:

HTML:

<div id="footer"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

CSS:

#footer div { display: block; float: left; background: #eee; height: 220px; width: 33%; } 
#footer div:not(:first-child) { border-left: 1px solid #ccc; }

https://jsfiddle.net/6zto4dg5/

Quelle

2016-03-19 22:27:52 IzzyCooper

Wie man vertikale Linie in css

Antwort

Verwandte Themen