0

我已经搜索了许多类似的问题，但没有一个解决方案有效。还应该注意的是，我正在使用 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]我正在努力实现这一目标

4

2 回答 2

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;
 }
于 2013-01-10T06:50:36.157 回答
0

这是你想要做的：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;
 }
于 2013-01-10T03:21:46.690 回答