Align BandsinTown小工具＆圖片

-1

我正在尋找對齊bandintown小工具和我的樂隊的圖片。小部件&圖片應根據瀏覽器大小調整大小。我研究並嘗試了不同的方法，但無法使其運行。Align BandsinTown小工具＆圖片

這裏是bandsintown部件代碼：

\t <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>

來源

2017-07-25 NL Coder

所有你需要做的是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更改爲類。

您還使用了一個相對鏈接指向圖像，我用佔位符替換了圖像，以便您可以看到圖像正確對齊。

希望這會有所幫助！ :)

來源

2017-07-25 23:23:38

感謝您的迴應？如果我想要調整相對於屏幕尺寸的大小，並且保持並排，那又如何呢？ –

這就是'float：left'的確;它確保兩個元素彼此相鄰。如果你同時給出兩個元素'width：50％'（或任何總數等於100％），那麼當屏幕調整大小時，它們將自動縮放。話雖如此，你可能希望從手機中將它們放在另一個之下。這將需要媒體查詢，並可能從Bootstrap或Foundation等框架中受益:) –

Align BandsinTown小工具＆圖片

回答

相關問題