在PHP中使用內聯CSS和HTML並排放置圖像

Question

現在在這里我的網站。 我正在嘗試將Berkeley圖片放置在Modern Career Advice Logo的右側。

http://moderncareeradvice.com/blog/

但是，我遇到的問題是Berkeley圖像停留在底部。

目前，這是我的代碼：我正在使用Wordpress平台並編輯PHP文件。 我以前從未遇到過這樣的事情。 我如何將其放在右邊？

$title="<div style='float:left;'> <img src='/blog/wp-content/themes/genesis/images/logo2.png'> <img src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'> </div>";

出於某些奇怪的原因，在div中使用float：left不起作用...

謝謝。

編輯 ：

這是我的完整代碼：

function genesis_seo_site_title() {

    //* Set what goes inside the wrapping tags
    $inside = sprintf( '<a href="%s">%s</a>', trailingslashit( home_url() ), get_bloginfo( 'name' ) );

    //* Determine which wrapping tags to use
    $wrap = is_home() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';

    //* A little fallback, in case an SEO plugin is active
    $wrap = is_home() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;

    //* And finally, $wrap in h1 if HTML5 & semantic headings enabled
    $wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;

    //* Build the title
    $title  = genesis_html5() ? sprintf( "<{$wrap} %s>", genesis_attr( 'site-title' ) ) : sprintf( '<%s id="title">%s</%s>', $wrap, $inside, $wrap );
    $title .= genesis_html5() ? "{$inside}</{$wrap}>" : '';

    //*Here is the title header


$title="<div style='float:left;'><img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/logo2.png'> <img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'> </div>";


    //* Echo (filtered)
    echo apply_filters( 'genesis_seo_title', $title, $inside, $wrap );

}

Answer 1

有很多方法可以做到這一點：

$title="<div> <img style='float: left' src='/blog/wp-content/themes/genesis/images/logo2.png'><img style='float: left' src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'></div>";

浮點數應應用於對象本身，而不是父對象。 那只會使DIV浮出水面，而不是里面的IMG 。

要么：

$title="<div style='float:left;'><img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/logo2.png'> <img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'> </div>";

Answer 2

您可以添加一些CSS來實現它，將整個容器div浮動，但是圖像仍顯示為塊，您可以在圖像或顯示上使用float重新定義此行為，建議您不要放置樣式聯機但在單獨的文件中，並使用類屬性來引用內容：

$title='<div class="inline-images"> <img src="/blog/wp-content/themes/genesis/images/logo2.png"> <img src="/blog/wp-content/themes/genesis/images/CAA_Logo.jpg"> </div>';

然后在CSS中，您可以擁有：

.inline-images img { float: left; }

要么

.inline-images img { display: inline-block; }