아코디언 패널 내의 내용 배치에 문제가 있습니다. 네 번째 패널에서 두 번째 이미지가 첫 번째 이미지와 올바르게 정렬되지 않았습니다. 그것은 패널의 바닥에 붙어있는 종류입니다.jQuery 패널 내에서의 아코디언 정렬
기본적으로 아래에있는 텍스트와 함께 각 패널에 4 개의 이미지를 추가합니다. 나는 그들을 올바르게 정렬 시키려고 노력하고 있으며, 이것을하기에는 고온 인 것 같지 않습니다.
저는 CSS와 jQuery에 익숙하지 않으므로 놓치기 쉽다고 생각합니다. 나에게 줄 수있는 도움이나 도움을 주시면 감사하겠습니다. 시간 내 줘서 고마워.
내 JSFiddle : 당신은 이미지와 각각의 텍스트를 가질 수 있도록 http://jsfiddle.net/Del087/CzE3q/988/
#accordion {
width:100%;
margin:10px auto;
border:1px solid black;
-webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow:0px 1px 3px rgba(0, 0, 0, 0.4);
}
#accordion h2 {
clear: both;
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
border:1px solid white;
background-color:#ff6600;
font:bold 22px Petua One;
color:#ffffff;
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
#accordion .content1 {
background-color:#ffffff;
padding:10px 15px;
color:black;
height:150px;
width:25%;
float:left;
}
#accordion h2.active {
background-color:#000000;
}
<div id="accordion">
<h2>League Scores</h2>
<div class="content">
<div class="content1"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt=" photo PAHL210210_zps694744b9.png"/></a>
<br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a>
<br><a href="http://www.pahockey.com">Squirt</div>
<div class="content1"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/HPHL_zps31e66fcd.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/HPHL_zps31e66fcd.png" width="90" height="90" border="0" alt=" photo HPHL_zps31e66fcd.png"/></a>
</div>
</div>
<h2>League Standings</h2>
<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/Association%20Logos/PAHL210210_zps694744b9.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/PAHL210210_zps694744b9.png" height="100" width="100" border="0" alt="Pittsburgh Amateur Hockey League - Pittsburgh, PA" title="Pittsburgh Amateur Hockey League - Pittsburgh, PA"/></a>
<br><a href="http://www.pahockey.com">Pittsburgh Amateur Hockey League</a></div>
<div class="content"></div>
<h2>Tournament Scores</h2>
<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100" border="0" alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><br><a href="http://www.pahockey.com">Minnesota Gone Wild"</a></div>
<h2>Tournament Standings</h2>
<div class="content"><a href="http://s1314.photobucket.com/user/RTH13/media/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/bff3d1c7-f51d-42b7-98e4-240bfe796619_zpse0bc7d8e.jpg" height="100" width="100" border="0" alt="OneHockey - Laguna Hills, CA" title="OneHockey - Laguna Hills, CA"/></a><br><a href="http://www.pahockey.com">Minnesota Gone Wild</a><a href="http://s1314.photobucket.com/user/RTH13/media/Banner%20Ads/NSTESLogo_zps7c937049.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/Banner%20Ads/NSTESLogo_zps7c937049.png" width="100 height="100" border="0" alt=" photo NSTESLogo_zps7c937049.png"/></a><a>Niagara Sports Tournaments</a>
당신이 거기
<br>
에 LINEBREAK을 가지고 있다는 사실 외에
좋은 첫 번째 질문, SO에 오신 것을 환영합니다. 첫 번째 패널에서 제대로 두 개의 div 요소를 서로 겹치게 만들었습니다. 네 번째로 두 번째 이미지를 div에 배치하고 줄 바꿈과 함께 두 번째 이미지를 표시 한 다음 다른 부분 아래에 표시합니다. – skv