当方、ウェブページのデザイン、特にCSSは未経験でしてどのようにして
実現するのかがわかりません。
下記の要件を満たすCSSの記述方法をご教授下さい。
###要件
- 4つの要素を一行に等間隔で表示。
- ブラウザの幅に合わせて間隔を調整。ユーザがブラウザの幅を変えた時は自動で位置を調節。
- クリックした要素のみを非表示
###今の状態
- 一行に4要素を表示できておらず、4行に別れて表示される
- クリックした時、その要素の表示は消えるが詰められてしまう
###記述したコード
lang
1<div id="items"> 2 <div class="first> 3 <a href="javascript:void(0)" onClick="clickFirst()">一番目</a> 4 </div> 5 <div class="second"> 6 <a href="javascript:void(0)" onClick="clickSecond()">二番目</a> 7 </div> 8 <div class="third"> 9 <a href="javascript:void(0)" onClick="clickThird()">三番目</a> 10 </div> 11 <div class="fourth"> 12 <a href="javascript:void(0)" onClick="clickFourth()">四番目</a></div> 13 </div> 14</div>
lang
1 2function clickFirst() { 3 $(#items div.first a).hide(); 4 $(#items div.second a).show(); 5 $(#items div.third a).show(); 6 $(#items div.fourth a).show(); 7} 8 9function clickSecond() { 10 $(#items div.first a).show(); 11 $(#items div.second a).hide(); 12 $(#items div.third a).show(); 13 $(#items div.fourth a).show(); 14} 15 16function clickThird() { 17 $(#item div.first a).show(); 18 $(#item div.second a).show(); 19 $(#item div.third a).hide(); 20 $(#item div.fourth a).show(); 21} 22 23function clickFourth() { 24 $(#items div.first a).show(); 25 $(#items div.second a).show(); 26 $(#items div.third a).show(); 27 $(#items div.fourth a).hide(); 28} 29
lang
1#items div.first a { 2} 3 4#items div.second a { 5} 6 7#items div.third a { 8} 9 10#items div.fourth a { 11} 12
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/27 13:41
2016/07/27 15:05