【问题标题】:Add image to collapsable content header将图像添加到可折叠的内容标题
【发布时间】:2011-05-26 20:14:30
【问题描述】:

我正在关注可折叠内容文档 - http://jquerymobile.com/demos/1.0a4.1/docs/content/content-collapsible.html

是否有一种方法可以在标题字段中向右添加图像(在标题字段下方的代码中由“测试”引用)。

<div data-role="collapsible" data-collapsed="true">
        <h3>Test</h3><add image here>
    </div>

我似乎在文档中找不到任何内容。

感谢您的帮助

【问题讨论】:

    标签: jquery jquery-mobile


    【解决方案1】:

    HTML

    <div data-role="page" id="home"> 
        <div data-role="content">
            <div data-role="collapsible">
                <h3>I'm a header</h3>
                <p>I'm the collapsible content.</p>
            </div>
            <div data-role="collapsible" data-collapsed="true">
                <h3>With Image <img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/us.png" alt="US Flag" /></h3><p>I'm another collapsible content.</p>
            </div>
        </div>
    </div>
    

    【讨论】:

    • 谢谢,jsfiddle.net/xMbyP/4 将图像向右下推,并导致标题高度略微增加。代码样式="float:right;"似乎是造成这种情况的原因,是否有另一种将图像向右对齐的方法?
    • 这可以解决问题 -

      图像在右侧jquerymobile.com/demos/1.0a4.1/docs/lists/images/us.png" alt="美国国旗" style="float:right; margin-top:-15px;" />

      我是另一个可折叠的内容。

    • 将边距 val 设置为负数有多安全?
    • 每个浏览器都会以不同的方式呈现它。我在 Linux 上使用 Chrome,我所做的看起来很棒。我还测试了-15px,它切断了一半的图像。此外,在设备测试时,每个设备的外观也可能不同。
    • 同样在 jsfiddle 页面上,您可以通过拖动条形分隔线来调整框的大小,以了解它在移动屏幕上的外观
    【解决方案2】:

    在主 div 中使用左右浮动的两个 div 怎么样?

    <div data-role="collapsible" data-collapsed="true">
        <div style="float: left;"><h3>Test</h3><add image here></div>
        <div style="float: right;"><img src="parth/to/image.ext" /></div>
    </div>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-07-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-04-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多