0

私はこのような多くの同様の質問を検索しましたが、どの解決策も機能していません。また、twitterブートストラップを使用していることにも注意してください。一連のdivが、その下部にある親divの全長にまたがるようにします。text-align：centerというdiv内に配置してから、gridPicsクラス内でfloat-leftを使用し、display：inline-block、text-align：leftを使用してみましたが、何も実行されないようです。以下の例の2つはまったく同じ場所にあり、並べて表示したいと思います。これが私が持っているものです：

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

これはあなたがやろうとしていることですか：デモ

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 に答える