0

我正在为 ipad 创建一个 Web 应用程序，我想在页面左侧提供社交媒体链接。如果我的页面正在滚动，在这种情况下，链接也应该永久修复。任何人都可以帮助我进行此设计或任何链接都会有所帮助。

这是我的代码：

.PreCycleContent{width:100%;margin-top:6%;position:absolute;}
.PreCycleContentLeftAside{
    width:28%;
    margin-left:2%;
}
.PreCycleContentRightAside{
    width:60%;
    margin-left:2%;
}
.PreCycleContentLeftAside,.PreCycleContentRightAside{   
    min-height:33.5em;
    overflow-y:auto;
    border:1px solid #000000;
    border-radius:5px;
    padding:1em 1% 1em 1%;
    background:#ffffff;
    display:inline-block;
}

.PreCycleContentLeftAside>ul,.PreCycleContentRightAside>ul{
    margin-top:1em;
}
.leftSwipeImage,.rightSwipeImage{
    display:inline-block;
}
.leftSwipeImage{
    float:left;
    margin-top:8em;
    position:fixed;
}
.rightSwipeImage{
    margin-top:8em;
    position:fixed;
    float:right;

}

html代码是：

<div class="PreCycleContent">
                <div class="leftSwipeImage">
                    <img src="appimages/left_handle.png" alt="leftSwipeImage" />
                </div>
                <div class="PreCycleContentLeftAside">
                    <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">                       
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Outbox</a></li>
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Outbox</a></li>
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Work</a></li>
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Outbox</a></li>
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Work</a></li>   
                    </ul>
                </div>
                <div class="PreCycleContentRightAside">
                        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
                            <li><a href="#">Apple</a></li>
                            <li><a href="#">Banana</a></li>
                            <li><a href="#">Cherry</a></li>
                            <li><a href="#">Cranberry</a></li>
                            <li><a href="#">Grape</a></li>
                            <li><a href="#">Orange</a></li>
                            <li><a href="#">Cranberry</a></li>
                            <li><a href="#">Grape</a></li>
                            <li><a href="#">Orange</a></li>
                            <li><a href="#">Cranberry</a></li>
                            <li><a href="#">Grape</a></li>
                            <li><a href="#">Orange</a></li>>
                        </ul>
                </div>
                <div class="rightSwipeImage">
                    <img src="appimages/right_handle.png" alt="rightSwipeImage" />
                </div>
            </div>

右侧的图像未设置在页面的右上角。float:right 无法与 position 正常工作：已修复。

4

1 回答 1

0

使用以下 CSS 代码

 .linkclass {
    position:fixed;
    margin-top:10px;
    width:10px;
    height:10px;
 }

它将出现在屏幕上方 10 像素处。

于 2013-11-13T07:05:35.300 回答