Сделать mulitple divs рядом друг с другом внутри родительского div

100
4

Я искал многие подобные вопросы, но ни одно из этих решений не работает. Следует также отметить, что я использую twitter bootstrap. Я хочу, чтобы куча divs охватывала всю длину родительского div в нижней части. Я попытался поместить их в div, чтобы text-align: center, а затем использовать float-left внутри класса gridPics и использовать display: inline-block, text-align: left и ничего, похоже, не делают этого. Два в приведенном ниже примере находятся в одном и том же месте, и я хочу их рядом. Вот что я имею:

HTML:

 <div class="row-fluid">
<div class="span8 offset2 articleContent">
<!-- These are the divs to span across, when it works there would be more than two -->
<div class="gridPics"></div>
<div class="gridPics"></div>
<!-- They will also go over this image -->
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>

CSS:

 .gridPics{
position: absolute;
z-index: 1;
width: 10%;
height: 20%;
background: #0000b3;
bottom: 0;
float: left;
}

.articleContent{
position: relative;
box-shadow: 0 0 5px 5px #888;
}

#sidePic{
position: relative;
z-index: -1;
}

Здесь я делаю это, синие divs будут pics (сродни thumbnails), которые можно щелкнуть. Я хочу, чтобы они прошли весь путь:

/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]Where I am trying to achieve this

спросил(а) 2020-03-26T17:06:54+03:00 3 месяца, 2 недели назад
1
Решение
55

Здесь скрипка: http://jsfiddle.net/pureux/Er9eG/

Вам нужен контейнер для вашей gridPics, и он будет абсолютным позиционированием (вместо gridPics) внизу. Затем плавайте gridPics внутри контейнера.

.picContainer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 50px;
}

.gridPics {
width: 50px;
height: 50px;
float: left;
display: block;
margin-right: 4px;
margin-top: 4px;
}

ответил(а) 2020-03-26T17:26:56.573786+03:00 3 месяца, 2 недели назад
39

Это то, что вы пытаетесь сделать: DEMO

HTML

<div class="row-fluid">
<div class="span8 offset2 articleContent">
<div class="gridPics"></div>
<div class="gridPics"></div>
<div class="clear"></div>
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>

CSS

.gridPics{
width: 10%;
height: 20px;
background: #0000b3;
float: left;
border:solid #FFF 1px;
}
.articleContent{
box-shadow: 0 0 5px 5px #888;
}

#sidePic{
z-index: -1;
}

ответил(а) 2020-03-26T17:06:54+03:00 3 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема