랜덤?으로 자리 배치하는 태그?제이쿼리? 채택완료
초록물고기
1년 전
조회 2,672
안녕하세요~
평등한 방법을 찾다가.. 우연히 생각하는게 있어서
초보 이렇게 질문 올립니다.
아래와 같이 3개의 사진과 사진설명이 들어갑니다.
접속할때 랜덤으로 자리가 바뀌게 하고 싶습니다.
사진+텍스트
티스토리 블로그와 그누보드 게시판에 작성하려고 합니다.
조언 부탁드립니다. 좋은 하루 보내세요
http://sir.kr/data/editor/2408/3672934563_1724813349.0414.jpg" width="100%" />
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
미니님a
Expert
1년 전
http://sir.kr/data/editor/2408/978180634_1724814116.3688.gif" width="100%" />
</p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>Document</title></p>
<p> <style></p>
<p> *{margin: 0; padding: 0;}</p>
<p> .container {</p>
<p> display: flex;</p>
<p> flex-direction: column;</p>
<p> align-items: center;</p>
<p> justify-content: center;</p>
<p> }</p>
<p> </p>
<p> .item {</p>
<p> margin: 20px;</p>
<p> text-align: center;</p>
<p> }</p>
<p> </p>
<p> .photo {</p>
<p> width: 200px;</p>
<p> height: 100px;</p>
<p> display: flex;</p>
<p> align-items: center;</p>
<p> justify-content: center;</p>
<p> background-color: #ddd;</p>
<p> margin-bottom: 10px;</p>
<p> }</p>
<p> </p>
<p> .text {</p>
<p> font-size: 16px;</p>
<p> }</p>
<p> </style></p>
<p> <script src="<a href="https://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-latest.min.js"></script></a></p>
<p> <script></p>
<p> $(document).ready(function() {</p>
<p> const $container = $('.container');</p>
<p> const $items = $container.children();</p>
<p> </p>
<p> $items.sort(function() {</p>
<p> return Math.random() - 0.5;</p>
<p> });</p>
<p> </p>
<p> $container.append($items);</p>
<p> });</p>
<p> </script></p>
<p></head></p>
<p><body></p>
<p> <div class="container"></p>
<p> <div class="item" id="item1"></p>
<p> <div class="photo">사진1</div></p>
<p> <div class="text">어쩌구 저쩌구(텍스트)</div></p>
<p> </div></p>
<p> <div class="item" id="item2"></p>
<p> <div class="photo">사진2</div></p>
<p> <div class="text">아이고 아이고(텍스트)</div></p>
<p> </div></p>
<p> <div class="item" id="item3"></p>
<p> <div class="photo">사진3</div></p>
<p> <div class="text">이래도 되나 싶다(텍스트)</div></p>
<p> </div></p>
<p> </div></p>
<p></body></p>
<p></html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
초록물고기
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
속이 시원해졌어요^^
건강하시고 행복하세요^^