Question

对某些人来说，这可能非常简单，但我使用的是手风琴＆＃34; jquery显示联系人列表。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
        $(function() {
            $("#accordion").accordion();
        });
    </script>
</head>

<body>
    <div id="accordion">
         <h3>Section 1</h3> 
        <div>
            <p>test
                <br>Phone: xxxx
                <br>Email: blabla@aejx.com</p>
        </div>
         <h3>Section 2</h3> 
        <div>
            <p>test</p>
        </div>
         <h3>Section 3</h3> 
        <div>
            <p>test</p>
        </div>
         <h3>Section 4</h3> 
        <div>
            <p>test</p>
        </div>
    </div>
</body>

我想做的是能够将联系人的照片显示在手风琴中每个扩展盒子的右侧（理想情况下在右上方，所以如果我最后添加一个生物或图片出现在展开框右上角的东西）。

我该怎么做？没有边框的桌子？有人可以帮我代码吗？谢谢:)）

Answer 1

扩展框中您想要的任何内容都需要进入div中的#accordion元素。从那里，只需将图像浮动到右侧。请注意以下几点：

<h3>Section 1</h3>

<div> <!-- content starts here -->
  <img src="contact-image.jpg">
  <p>test
    <br>Phone: xxxx
    <br>Email: blabla@aejx.com
  </p>
</div> <!-- end content -->

CSS：

#accordion div {
  overflow: hidden;
}

#accordion img {
  float: right;
}

这是准系统CSS，因此您可能需要添加一些margin来添加适当的间距。

如何在选项卡内容中定位图像

1 个答案: