在父div中将多个div排列在一起

Question

我搜索了许多这样的类似问题，但没有一个解决方案有效。还应该注意我正在使用twitter bootstrap 。我想要一堆div来跨越底部的父div的整个长度。我已经尝试将它们放在文本对齐：中心的div中，然后在gridPics类中使用float-left，并使用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;
 }

这是我在这里做的事情，蓝色的div将是可以点击的图片（类似于缩略图）。我希望他们一路走来：

/ScreenShot2013-01-09at85450PM_zps550e8e4a.png [/ IMG]

Answer 1

这是一个小提琴： 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;
 }

Answer 2

这是你要做的事情：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;
 }