<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Vertical List bbc news panel</h2> <dl class="dl-unsur"> <dd> <a href="/turkce/haberler-turkiye-38878761" class="pull-left"> <h2 class="pull-right">1</h2> <div class="pull-left" >News news news news news news news news news news news news news .</div> </a> <p class="small pull-left" ><span class="glyphicon glyphicon-time"></span> 18 Ocak 2017</p> </dd> <dd> <a href="/turkce/haberler-turkiye-38878761" class="pull-left"> <h2 class="pull-right">2</h2> <div class="pull-left" >news news news news news news news news news news news news ?</div> </a> <p class="small pull-left" ><span class="glyphicon glyphicon-time"></span> 18 Ocak 2017</p> </dd> <dd> <a href="/turkce/haberler-turkiye-38878761" class="pull-left"> <h2 class="pull-right">3</h2> <div class="pull-left" >news news news news news news news news news news news news ?</div> </a> <p class="small pull-left" ><span class="glyphicon glyphicon-time"></span> 18 Ocak 2017</p> </dd> </dl> </div> </div>

/* -------------------------------------- 1,2,3 listeleme unsurları en çok okunanlar Created by Muhittin BUDAK :) -------------------------------------- */ .dl-unsur { position:relative; float:left; } .dl-unsur dd { width:100%; border-top:1px solid #959595; display:block; float:left; padding:8px 0; } .dl-unsur dd:first-child { border-top:0; } .dl-unsur dd > a { width:100%; margin-left:5px; } .dl-unsur dd > a > h2 { width:10%; margin-top:0; padding-right:10px; color:#C71817; text-align:right; font-weight:bold; } .dl-unsur dd > a > div { font-family:sans-serif, serif; font-size:17px; width:89%; line-height:1.2em; } .dl-unsur dd> p { width:89%;margin:0 0 0 5px; } /* -------------------------------------- Media Queries -------------------------------------- */ /* Portrait & landscape phone */ @media (max-width: 480px) { /* en çok okunan listeleme */ .dl-unsur dd > a > h2 { font-size:250%; } .dl-unsur dd > a > div { font-family:sans-serif, serif; font-size:15px; } }