Question

我正在为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：右边没有正确使用postion：fixed。

Answer 1

使用以下css代码

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

屏幕上会显示 10px top 。

在社交媒体链接的页面左侧设置图像

1 个答案: