これは基本的なWeb101に戻ると確信しており、質問するのは恥ずかしいと思いますが、画像の下に設定した注文番号リストがあります。いずれかの数字をクリックすると、画像が別の画像に変わります。
ブラウザウィンドウのサイズを変更するまで、すべてが完璧に機能します。数字は現在の場所に残り(位置は相対的です)、その他はすべてページの中央に移動します(これを実行したいため)。
ライブページへのリンクは次のとおりです-http://thewiredlife.net/kelseytest/fish.html
<div id="sectionwrap" class="svw">
<ul>
<li><img src="images/fish_full.png" width="1024" height="602" alt="fish"></li>
<li><img src="images/fish_full_2.png" width="1024" height="602" alt="jj"></li>
</ul></div>
#sectionwrap {
width: 1024px;
height:340px;
margin-left: auto;
margin-right: auto;
margin-top:20px;}
.svw {width: 50px; height: 102px;}
.svw ul {position: relative; left: -999em;}
.stripViewer {
position: relative;
overflow: hidden;
margin: 0 0 1px 0;
}
.stripViewer ul
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li {
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
}
.stripTransmitter ul {
margin-top:6px;
margin-left: 60px;
padding: 0;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font-family: 'OpenSansLight', Helvetica, Arial, sans-serif;
font-size:14px;
text-align: center;
line-height: 22px;
color: #BCBCBC;
text-decoration: none;
display: block;
}
ウィンドウのサイズが変更されたときに、数字を残りのコンテンツに従わせるための解決策はありますか?ありがとう :)