0

HTML 代码： 

<div class="goleft"> AD 300x250 size </div>


        <div class="itemImageBlock goleft">
              <span class="itemImage">
              <img src="/media/k2/items/cache/c3997142576e6f4d163ead570965368d_S.jpg" alt="Pranab Mukherjee" style="width:300px; height:250px;" />
          </span>

        </div>

CSS：

.itemImageBlock { margin:0 0 16px; padding:0; text-align: center; clear: both; }
span.itemImage { display:block; text-align:center; margin:0 0 8px 0; }
.goleft{
    float:left
}

这两个街区一个接一个。我希望这些并排对齐。

请帮助我实现这一目标。

如果我更改 div 块的顺序（第一个图像下一个广告）它的工作。但我想要第一个广告和下一张图片。

图片网址：http ://tinypic.com/r/2ih5hco/6

提前致谢。

4

3 回答 3

0 
.itemImageBlock {padding:0;
    text-align:center;
}
span.itemImage {
    display:block;
    text-align:center;
    margin:0 0 8px 0;
}
.goleft{
    float:left;
}

和

<div class="goleft"> AD 300x250 size </div>
<div class="itemImageBlock">
    <span class="itemImage">
        <img src="/media/k2/items/cache/c3997142576e6f4d163ead570965368d_S.jpg" alt="Pranab Mukherjee" style="width:300px; height:250px;" />
    </span>
</div>
于 2012-08-10T17:18:20.867 回答
0

问题似乎在.itemImageBlockCSS 声明中。删除clear:bothCSS，DIV 将对齐。见：http: //jsfiddle.net/pe6s5/

于 2012-07-03T18:22:54.520 回答
0

只需在你的 css 代码中添加一个额外的类，让它变得整洁......

CSS

.goleft{
    float:left
}

并将此类添加到您的 DOM -

       <div class="itemImageBlock goleft">
              <span class="itemImage">

              </span>
         </div>
         <!-- Advertisement(300x250) -->
          <div class = "goleft">
          </div>
于 2012-07-03T17:26:06.970 回答