css - 如何将xslt中的文本和图像与css对齐

Question

嗨，我有一个 xml 文件，我以这种方式放置了一些图像：<pb facs="ciao.jpg">.
然后我有一个 xsl 文件，我在其中放置了这样的 Java 脚本：

<script type="text/javascript">
    function toggleSize(img){
        if (parseInt(img.style.width) !=220){
            img.style.width='220px';
        }
        else {
            img.style.width = '90%';
        }
    }

    function showHideNote(noteId){
        var note = document.getElementById(noteId);
        if (note.className == 'hiddenNote') {
            note.className='showingNote';
        }
        else {
            note.className='hiddenNote';
        }
        return false;
    }
</script>

它制作了一个小图像，我可以在其中单击以及下面的所有文本。
所以问题是我想在左边有一个更大的图像，在右边有相关的文本。有什么建议吗？

Answer 1

只需添加float: left到图像的样式。

<div>
<h1 style="text-align:center" id="chapter_1">Capitulo primeyro</h1>
<img src="folio16r.jpg" style="width: 120px; cursor: pointer; float: left"
  onclick="toggleSize(this)" alt="page image from manuscript">
<p style="text-align:justify; font-family:garamond"> dddd </p>
</div>

顺便说一句，您在评论中发布的 html 与原始问题不同（问题有ciao.jpg图片，而 HTML 有folio16r.jpg。我不确定你如何以及在哪里应用样式。所以我希望你能完成这项工作。