Question

我希望对齐bandintown小部件和我乐队的照片。小部件＆amp;图片应根据浏览器大小调整大小。我已经研究过并尝试了不同的方法，但我无法让它发挥作用。

这是bandsintown小部件代码：

＆＃13;

	<div id="wrap" class="section" id="news">
                <script src="https://widget.bandsintown.com/main.min.js"></script>
                <a class="bit-widget-initializer" data-artist-name="Band Name" data-display-past-dates="true" data-widget-width="50%" data-font='Frente H1'></a>
               <img src="/images/pic.jpg">
    </div>

＆＃13;

Answer 1

您需要做的只是float .bit-widget-container（由脚本生成）和您想要的left图片：

.bit-widget-container, #news > img {
  float: left;
}

<div class="section wrap" id="news">
  <script src="https://widget.bandsintown.com/main.min.js"></script>
  <a class="bit-widget-initializer" data-artist-name="Band Name" data-display-past-dates="true" data-widget-width="50%" data-font='Frente H1'></a>
  <img src="http://placehold.it/200">
</div>

请注意，您的代码段有重复的ID（wrap和news），这是无效标记。因此，我已将上述代码段中的wrap ID更改为类。

您还使用了图像的相对链接，我已将其替换为占位符，以便您可以正确地看到图像对齐。

希望这有帮助！：）

对齐BandsinTown小部件＆amp;图片

1 个答案: