Question

我不明白为什么我在“Rechercher par”下的div位于行的底部而不在顶部。

这是我的html：

<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;
}

我正在寻找的是在顶部放置内容为“Voscritèresderecherche ...”的div，代码上部的div class =“div-inline”。

我使用Bootstrap 3。

Answer 1

在vertical-align: top;

上添加.div-inline

Div获得底部位置而不是顶部

1 个答案: