lundi 29 mai 2017

how to design One among tag One among at left and right

first sorry my bad english.

i need something like this

enter image description here

as you can see one of major is right and on left , years same

i wrote this HTML & CSS code

HTML

<div class="row">
        <div class="full">
            <div class="d1">university 1</div>
            <div class="d2">year 1</div><br>
            <div class="d1">university 2</div>
            <div class="d2">year 2</div><br>
            <div class="d1">university 3</div>
            <div class="d2">year 3</div><br>
            <div class="d1">university 4</div>
            <div class="d2">year 4</div><br>
        </div>
    </div>

CSS

.full div{
  display: inline-block;
  width: 130px;
  height: 50px;
 }

.full div:nth-child(odd){
  float: left;
 }

and here my result:

enter image description here

at first sight yes,it's work fine as i excepted but it's not.

problem is:

1:i can't align center no mater what i do

2: at extra small size div goes down not side by side

3: if i give class like col-xs-6 it's not work as i except

here online code enter link description here

just resize window to understand what i'm saying




Aucun commentaire:

Enregistrer un commentaire