css - 如何在Wordpress中将缩略图包裹在文本中？

我知道我必须在Wordpress论坛中提问。
但是我对stackoverflow有点疯狂，我首先在这里问。
我正在从头开始开发Wordpress主题。在我的博客文章中，我想将缩略图图像包裹在文本中。
我使用的代码是

    <div class="row">

        <?php if( has_post_thumbnail() ): ?>
           <div class="col-xs-12 col-sm-4">
            <div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
           </div>
           <div class="col-xs-12 col-sm-8">
            <?php the_content(); ?>
           </div>

        <?php else: ?>
            <div class="col-xs-12">
            <?php the_content(); ?>
            </div>

        <?php endif; ?>
   </div>

现在是内容和缩略图并排。
我喜欢将图像包装在文本中。
图像为。

最佳答案

您将缩略图和内容包装在两个不同的列中，这就是为什么它们并排显示的原因。将您的代码更改为此：

<div class="row">

        <?php if( has_post_thumbnail() ): ?>
           <div class="col-xs-12 col-sm-12">
            <div class="thumbnail"><?php the_post_thumbnail('small'); ?></div>
            <?php the_content(); ?>
           </div>

        <?php else: ?>
            <div class="col-xs-12">
            <?php the_content(); ?>
            </div>

        <?php endif; ?>
   </div>

然后使用css将缩略图div左右浮动。

.thumbnail {
 float:left;
}

关于css - 如何在Wordpress中将缩略图包裹在文本中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35671643/