Question

HTML code：

<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

先谢谢。

Answer 1

只需在你的css代码中添加一个额外的类，使其更加凌乱......

CSS

.goleft{
    float:left
}

并将此类添加到DOM -

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

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

Answer 2

问题似乎出现在.itemImageBlock CSS声明中。删除clear:both CSS，DIV将对齐。请参阅：http://jsfiddle.net/pe6s5/

Answer 3

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

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

3 个答案: