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

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>

这两个街区接踵而至。我想让它们并排排列

请帮助我实现这一目标

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

图像URL:

---

提前感谢。

只需在css代码中添加一个额外的类，使其无混乱

CSS

并将该类添加到DOM中-

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

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

---

问题似乎出现在

.itemImageBlock

CSS声明中。删除

清除：CSS和div都将对齐。见：

及

AD 300x250尺寸
PHP与此无关。发布生成的HTML。但是如何将图像裁剪为300x250？你能帮帮我吗？我被裁剪了，但是，如果我按照像图像和广告这样的顺序去做的话，图像和广告没有并排对齐，但是如果我先放置广告块，它就不工作了。你可能应该发布一个屏幕，显示你拥有的东西和你希望它看起来完美的东西（谢谢）…现在它们并排对齐了。我能知道如何获得这两个分区之间的空间吗。
.goleft{
    float:left
}

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

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

.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>