Question

所以我正在制作一个Wordpress页面，基本上我有一个标题栏和一个文本栏。

问题在于我正在使用wordpress文本编辑器，它将我的所有内容放入文本列，但我希望这些照片的几张照片和标题进入标题栏，以便读者阅读和theres图片旁边。我成功使用position：absolute，除了照片不再响应放大和缩小网页。

如何将书面内容保留在文本列中，并将标题列中的图片保留，并让它们仍然响应缩放，它们会在放大/缩小的标题列中保留？

（我故意将“＆lt;”放在（＆lt;）中）

（＆lt;）a href =“http：//localhost/wordpress/wp-content/uploads/2016/04/18.jpg”＆gt; （＆lt;）img class =“size-medium wp-image-146 alignleft”; （＆lt;）src =“http：//localhost/wordpress/wp-content/uploads/2016/04/18.jpg”alt =“年龄18”宽度=“175”身高=“400”/＆gt;

（＆lt;）div id = caption18＆gt;我大约18岁（＆lt;）/ div＆gt;

/* Two Column Title Layout */
div.title-column {
    width: 20%;
    float: left;
}

div.text-column {
    width: 80%;
    float: right;
}

<article class="post page">

    <!-- column-container -->
    <div class="column-container clearfix">

        <!-- title-column -->
        <div class="title-column">
            <h2><?php the_title(); ?></h2>
        </div><!-- /title-column -->

        <!-- text-column -->
        <div class="text-column">
            <?php the_content(); ?>
        </div><!-- /text-column -->

    </div><!-- /column-container -->


</article>

<?php endwhile;

else :
    echo '<p>No content found</p>';

endif;

get_footer();

?>

Answer 1

如果我理解你的问题，你是在尝试做同样的事情，同时保留图像的可扩展性？请注意，我必须调整一些括号。我还将图像的宽度更改为＆＃34; auto＆＃34;和＃34; 0＆＃34;的高度。这应该保留图像的可伸缩性，但我还没有测试过。

    <!-- title-column -->
    <div class="title-column">
        <h2><?php the_title(); ?></h2>
        <a href="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg">
           <img class="size-medium wp-image-146 alignleft" src="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg" alt="Age 18" width="auto" height="0">
        </a>
    </div><!-- /title-column -->

如何将HTML照片放在不同的div中？我觉得PHP？

1 个答案: