CSS和PHP中的图像对齐问题

Question

我对CSS和PHP的使用过程非常陌生，但是对于Wordpress和小部件，我正尝试通过插件来变得更好。

我试图让我的小Twitter鸟出现在我的Twitter内容消息旁边，但它仍然位于消息的顶部。

我要实现的目标的示例可以在此处找到。 http://globe-trekking.com/twitter_ideal.jpg （无法添加图片，因为这是我的第一篇文章）

我怎么能克服这个。

我相关的PHP代码是：

$widgetContent .= "<span class='entry-content'><img class='twitter_bird' src='http://globe-trekking.com/running/wp-content/themes/newscast/images/bird_blue_16.png'>{$entryContent}</span>";

完整的PHP代码是：

    $widgetContent .= '<ul>';
    if ( ! is_array( $tweets ) || count( $tweets ) == 0 ) {
        $widgetContent .= '<li class="wpTwitterWidgetEmpty">' . __( 'No Tweets Available', $this->_slug ) . '</li>';
    } else {
        $count = 0;
        foreach ( $tweets as $tweet ) {
            // Set our "ago" string which converts the date to "# ___(s) ago"
            $tweet->ago = $this->_timeSince( strtotime( $tweet->created_at ), $args['showts'], $args['dateFormat'] );
            //$entryContent .= '<li>';
            $entryContent = apply_filters( 'widget_twitter_content', $tweet->text, $tweet );
            $widgetContent .= "<span class='entry-content'><img class='twitter_bird' src='http://globe-trekking.com/running/wp-content/themes/newscast/images/bird_blue_16.png'>{$entryContent}</span>";
            $widgetContent .= " <span class='entry-meta'>";
            $widgetContent .= "<span class='time-meta'>";
            $linkAttrs = array(
                'href'  => "http://twitter.com/{$tweet->user->screen_name}/statuses/{$tweet->id_str}"
            );
            $widgetContent .= $this->_buildLink( $tweet->ago, $linkAttrs );
            $widgetContent .= '</span>';

            if ( 'true' != $args['hidefrom'] ) {
                $from = sprintf( __( 'from %s', $this->_slug ), str_replace( '&', '&amp;', $tweet->source ) );
                $widgetContent .= " <span class='from-meta'>{$from}</span>";
            }
            if ( !empty( $tweet->in_reply_to_screen_name ) ) {
                $rtLinkText = sprintf( __( 'in reply to %s', $this->_slug ), $tweet->in_reply_to_screen_name );
                $widgetContent .=  ' <span class="in-reply-to-meta">';
                $linkAttrs = array(
                    'href'  => "http://twitter.com/{$tweet->in_reply_to_screen_name}/statuses/{$tweet->in_reply_to_status_id_str}",
                    'class' => 'reply-to'
                );
                $widgetContent .= $this->_buildLink( $rtLinkText, $linkAttrs );
                $widgetContent .= '</span>';
            }
            $widgetContent .= '</span>';

            if ( 'true' == $args['showintents'] ) {
                $widgetContent .= ' <span class="intent-meta">';
                $lang = $this->_getTwitterLang();
                if ( !empty( $lang ) )
                    $linkAttrs['data-lang'] = $lang;

                $linkText = __( 'Reply', $this->_slug );
                $linkAttrs['href'] = "http://twitter.com/intent/tweet?in_reply_to={$tweet->id_str}";
                $linkAttrs['class'] = 'in-reply-to';
                $linkAttrs['title'] = $linkText;
                $widgetContent .= $this->_buildLink( $linkText, $linkAttrs );

                $linkText = __( 'Retweet', $this->_slug );
                $linkAttrs['href'] = "http://twitter.com/intent/retweet?tweet_id={$tweet->id_str}";
                $linkAttrs['class'] = 'retweet';
                $linkAttrs['title'] = $linkText;
                $widgetContent .= $this->_buildLink( $linkText, $linkAttrs );

                $linkText = __( 'Favorite', $this->_slug );
                $linkAttrs['href'] = "http://twitter.com/intent/favorite?tweet_id={$tweet->id_str}";
                $linkAttrs['class'] = 'favorite';
                $linkAttrs['title'] = $linkText;
                $widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
                $widgetContent .= '</span>';
            }
            //$widgetContent .= '</li>';

            if ( ++$count >= $args['items'] )
                break;
        }
    }

    $widgetContent .= '</ul>';

我的CSS代码是：

.widget_twitter div {
padding:0;
width:280px;
}

.widget_twitter ul li {
margin-bottom:5px;
margin-left:0px;
clear:both;
}

.widget_twitter a {
text-decoration:none;
color:#333333;
margin: 0 10px 10px 0;
}
.widget_twitter a:visited {
text-decoration:underline;
color:#FF00FF;
}
.widget_twitter a:hover {
text-decoration:underline;
color:#0000CC;
}

.widget_twitter .follow-button,
.widget_twitter .xavisys-link {
margin:0 10px 10px 25px;
}
.widget_twitter .entry-content {
width:260px;
display: inline-block;
line-height:22px;
margin-top:10px; 
margin-left: 13px;

}

.widget_twitter .entry-content twitter_bird {
vertical-align:middle;
}
.widget_twitter .entry-meta {
display:block;
font-size:80%;
margin-bottom: 10px;
margin-left: 13px;
}

.widget_twitter .intent-meta a {
background-image: url('images/everything-spritev2.png'); /** from Twitter resources */
display: inline-block;
text-indent: -9999px;
margin: 0 10px 10px 0;
height: 16px;
width: 16px;
}
.widget_twitter .in-reply-to-meta {
margin: 0 10px 10px 0;
}
.widget_twitter .intent-meta a.in-reply-to {
 background-position: 0 center;
}
.widget_twitter .intent-meta a:hover.in-reply-to {
background-position: -16px center;
}
.widget_twitter .intent-meta a.favorite {
background-position: -32px center;
}
.widget_twitter .intent-meta a:hover.favorite {
background-position: -48px center;
}
.widget_twitter .intent-meta a.retweet {
background-position: -80px center;
}
.widget_twitter .intent-meta a:hover.retweet {
background-position: -96px center;
}

任何帮助将不胜感激。 我设法使它具有“体面”的外观，但是除此之外，这是我尝试了许多尝试的最后一步。

问候，丹尼尔

Answer 1

很抱歉快速回答，可能是我错了，但是请尝试将float：left用于鸟类图像。