html - 如何使用 CSS 和 HTML 并排对齐图像和广告

Question

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 block 的顺序(第一个图像下一个广告)它的工作。但我想要第一个广告和下一张图片。

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

提前致谢。

Answer 1

只需在您的 css 代码中添加一个额外的类，使其变得整洁...

CSS

.goleft{
    float:left
}

并将此类添加到您的 DOM -

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

              </span>
         </div>
         <!-- Advertisement(300x250) -->
          <div class = "goleft">
          </div>