2014-02-15 4 views
0

"Rechercher par"아래에있는 내 div가 맨 아래에 있고 맨 위에없는 이유를 알 수 없습니다.Div 맨 위 대신 아래쪽 위치 얻기

<div class="col-md-5"> 
       <h5 class="margin-bottom-null"><span class="widget-title">Rechercher par</span></h5> 
       <div class="label-ombrage"></div> 
       <div class="div-inline"> 
        <div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">CRÉEZ UN COMPTE</span></div> 
        <div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">VOS CRITÈRES DE RECHERCHES</span></div> 
        <div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">INFOS SUR LE SITE</span></div> 
       </div> 
       <div class="line-separator div-inline pull-right"></div> 
      </div> 

그리고 바이올린 : 내가 찾고 무슨

http://jsfiddle.net/4sfkc/1/

.label-ombrage { 
    width: 60px; 
    height: 256px; 
    display: inline-block; 
    background-color:#cbcbcb; 
} 

.widget-title { 
    color: #659900; /* text color */ 
    font-family: "Dosis"; 
    font-size: 1.5em; 
    font-weight: bold; 
} 
h5 { 
    padding-left: 30px; 
} 
.bottom-buffer-medium { 
    margin-bottom: 30px; 
} 
.div-inline { 
    display: inline-block; 
} 
.line-separator { 
    width: 1px; 
    height: 256px; 
    /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMjM2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2NiY2JjYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIyMzYiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);*/ /* gradient overlay */ 
    background-image: -moz-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
    background-image: -o-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
    background-image: -webkit-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
    background-image: linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */ 
} 
.border-bottom { 
    border-bottom: #cbcbcb 1px solid; 
} 
.margin-bottom-ligh { 
    margin-bottom: 10px; 
    padding-bottom: 10px; 
} 
.margin-bottom-null { 
    margin-bottom: 0; 
} 
.link-utility { 
    color: #999; /* text color */ 
    font-family: "Dosis"; 
    font-size: 14px; 
    margin-left: 15px; 
} 
.choice-search-item { 
    color: #999; /* text color */ 
    font-family: "Dosis"; 
    font-size: 22px; 
    font-weight: bold; 
} 
.bullet-img { 
    height: 31px; 
    background: url(../Content/recherche_bullet.png) 0 31px !important; 
} 
.active-bullet .bullet-img { 
    height: 31px; 
    background: url(../Content/recherche_bullet.png) 0 0 !important; 
} 

콘텐츠 "보스 드 공들인 critères으로 사업부를 배치하는 것입니다

여기 내 HTML입니다. .. "코드 상단의 div 클래스 ="div-inline ".

나는 부트 스트랩 3.

답변

2

.div-inline

+0

ㅎㅎ 덕분에 vertical-align: top; 추가 사용합니다. 그래서 간단하게 ... :). 여기에 수수께끼가 있습니다. http://jsfiddle.net/4sfkc/5/ – Jerome2606

+0

@ Jerome2606 저도 같은 보트에 가보 았습니다. 때로는 픽스가 너무 단순하고 어리 석으나 몇 시간 째 코딩을했기 때문에 픽스를 볼 수 없다. :) – adamj

관련 문제