I'm trying to display content horizontally, but the result is not as expected.
The fifth column ("content 5") should appear on the bottom left, and be aligned with the content above.
Here is my code:
<!DOCTYPE html>
<html class="no-js" lang="fr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<h3>Content 1</h3>
<h4><a href="#">test</a></h4>
<p>test</p>
<p><span class="my-title">0,00 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 2</h3>
<h4><a href="#">test</a></h4>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p><span class="my-title">638,25 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 3</h3>
<h4><a href="#">tablo</a></h4>
<p>tablo tablo tablo tablo tablo tablo tablo tablo tablo </p>
<p><span class="my-title">555,00 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 4</h3>
<h4><a href="#">stage castagnettes avec toto</a></h4>
<p>stage castagnettes avec toto</p>
<p><span class="my-title">57,50 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 5</h3>
<h4><a href="#">reservation trop cool</a></h4>
<p>reservation trop cool</p>
<p><span class="my-title">50,00 €</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire