2 컬럼; 멀티 아코디언 창

Question

좋아, 몇 가지 문제가있어서 CSS라고 생각합니다. 다음은 현재 작업하고있는 내용입니다. http://www.notedls.com/demo/

뉴스 아코디언 메뉴를 중점적으로 다룹니다. 여기에는 작은 이미지 (패딩이있는 50x50)와 그 옆에 거대한 헤드 라인이 있습니다. 사용자가 헤드 라인을 클릭하면 기사로 확장됩니다. 사용자가 주석을 읽거나 직접 주석을 작성하려는 경우보기 주석을 클릭하여 주석을 더 확장 할 수 있습니다.

내가 가지고있는 문제 (명확하지 않은 경우)는 이미지와 텍스트의 간격입니다. ui.accordion-acc 또는 -left의 높이를 단순히 높이면 모든 것을 적합하게 만들 수 있지만 문제가 해결되지는 않습니다. 헤드 라인 1의 첫 번째 확장을 클릭하면 이미지 아래에보기 주석이 줄 바꿈됩니다. 이것은 내가 원하지 않는 것입니다. 나는 이러한 요소들을 추가 div로 분리하려고 시도해 왔습니다. 본질적으로, 나는 기사 + 댓글이 필드를 차지할 수 있기 때문에 이미지 아래에 무한히 빈 공간을 원한다. 이 CSS를 추가

Answer 1

봅니다 :

ul#acc1 .acc1 { padding-left: 50px; } /* headline */ 
ul#acc1 > li > div { padding-left: 55px; } /* text block under headline */ 
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments */ 
ul#acc1 ul li div { padding-left: 20px; } /* text here under view comments */ 

나는 오른쪽으로 밀어 된 이후 코멘트보기의 블록 크기를 줄일 수 있었다. 미리보기 이미지 크기와 일치하도록 50px, 55px, 487px (542px에서 55px까지 설정) 및 20px (조금만 들여 쓰기)를 조정하십시오.

---

그럼 문제는 아코디언 내에서 아코디언이있다, 그래서 당신이 ul.ui-accordion-container li a.ui-accordion-link 같은 일반 아코디언 CSS 클래스를 추가 할 때 두 수준에 영향을 미칩니다. 이것이 의견이 62px 아래로 이동 한 이유입니다.

당신은 이미 사용할 수있는 좀 더 구체적인 클래스가 있습니다 ...이 시도해보십시오. ul.ui-accordion-container li a.acc1하지만 링크에 높이를 추가하는 것을 권장하지는 않지만 그 대신 썸네일 높이와 일치하도록 <h1>에 추가하십시오. 따라서 이것을 시도하십시오 :

h1 { 
float: left; 
margin: 0px; 
padding: 1px; 
font-size: 30px; 
color: #9667cc; 
height: 65px; 
} 
ul.ui-accordion-container li a.acc1 { 
display: block; 
padding-left: 5px; 
margin-right: 3px; 
height: 62px; 
color: #000; 
text-decoration: none; 
line-height: 28px; 
} 
ul.ui-accordion-container li a.acc2 { 
line-height: 28px; 
} 

Answer 2

어떻게 뜨지 않았습니까? 다른 사업부가 반대 왼쪽 부유 때문에 이미지에 따라 무제한 공간을 만들어야합니다

.img {float: left; width: 50px; padding: 5px;} 
.title {float: left; width: 300px; padding: 5px;} 
.clear {clear: both; height: 1px;} 

<div class="img"><img src="img/news_ffxiv_a.jpg"></div> 
<div class="title">TITLE</div> 
<div class="clear"><!-- --></div> 

: 난 당신이 뭔가를 할 수 있다고 생각합니다. 열쇠는 단지 하나가 아닌 두 항목을 떠 다니는 것입니다.