css - 使图像向右对齐(或 float )

标签 css image alignment wordpress

我安装了允许显示作者照片的 Wordpress 用户照片插件。到目前为止一切顺利,但我希望它不在发布日期之后显示,而是与作者姓名和发布日期平行显示。 下图说明了一切:

enter image description here

看来我设法创建了一个新的 CSS 类。我在 css 中添加了:

featured-posts-block .user-photo{}

然后在循环中,我将用户照片代码包装在同一个 CSS 中,所以现在是:

为了测试它,我添加了“border:2px solid blue;”到 CSS,它显示得很好..

但是我无法让它 float 到文本的右侧,就像我在上面的照片中展示的那样。感谢您的帮助。

如果您还告诉我如果我想在显示图像时调整图像大小,代码会是什么样子,那就太好了。

你可以看到它的网站: http://kuttabna.net

我用来显示该 block 的代码:

<h2 class="entry-title"></a><a>" rel="bookmark" title="<?php printf(__('رابط  %s', 'framework'), get_the_title()); ?>"> <?php the_title(); ?></a></h2>

<!--BEGIN .entry-meta .entry-header-->
                        <div class="entry-meta entry-header">
                    <span class="published"> كتبها
                    <?php the_author_posts_link(); ?>  </span>
                    <span class="meta-sep">·</span>
                    <span class="published"> في <?php the_time( get_option('date_format') ); ?>
<?php userphoto_the_author_thumbnail() ?></span>
                            <!--END .entry-meta entry-header -->
                        </div>

最佳答案

图像正在 div 中打印出来,带有 user-photo 类,使用 float: right 为该类添加新样式到您的页面。包括 margin-left 5px 只是为了一些间距。

<style type="text/css">
div.user-photo{
    float: right;
    margin-left: 5px;
}
</style>

关于css - 使图像向右对齐(或 float ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9021291/

相关文章:

html - 创建响应式网格布局,其中所有元素在垂直和水平方向上彼此等距

image - 我有一个带有蓝线、透明背景的 PNG,没有别的。 CSS中有没有办法让线条变白?

android - 在android中裁剪图像

html - Webkit 与 Mozilla 的垂直对齐差异

html - 使用溢出 :hidden 搞乱了 chrome 中的布局

javascript - 如何在具有特定宽度的多个选择中打断单词

html - 响应式容器太小时不在彼此之间

javascript - jquery中如何去掉页眉和页面内容之间的空格?

python - 从数组创建图像文件

css - 无法让 Float 在 WordPress 中使用表单