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