使多个 div 在父 div 内彼此相邻排列答案

【问题标题】：Make mulitple divs line up next to each other inside parent div使多个 div 在父 div 内彼此相邻排列
【发布时间】：2013-01-10 14:50:36
【问题描述】：

我已经搜索了许多类似的问题，但没有一个解决方案有效。还应该注意的是，我正在使用 twitter bootstrap。我想要一堆 div 跨越它底部的父 div 的整个长度。我尝试将它们放在 text-align:center 的 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]

【问题讨论】：

任何插图？您想要实现的屏幕截图示例？或者 jsfiddle 它？
@Vainglory07 我发布了我想要完成它的地方。
所以要水平平铺蓝色缩略图？
@Vainglory07 是的，我的计划是让两行它们水平穿过那个 div，彼此重叠。
你试过你使用 float:left;每个缩略图？

标签： html css twitter-bootstrap

【解决方案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;
 }

【讨论】：

【解决方案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;
 }

【讨论】：

@PerfectDark 是的，这是正确的想法，但要检查一下 Perfect Dark 提到的图像。