DIV의 justify 정렬 문제
문제를 요약해보면..
<DIV class='item'></DIV>
<DIV class='item'></DIV>
<DIV class='item'></DIV>
</DIV>
와 같은 형식으로 HTML 을 생성하고
list 클래스에는 text-align:justify 형식을 주고
item 클래스는 inline-block 으로 합니다.
이렇게하면 안쪽에있는 DIV 들이 justify 정렬됩니다.
문제는..
list 클래스에 js 로 추가적인 item 들을 생성하면 justify 가 안됩니다.
왜 안될까요?
실제 문제가 되는 페이지는 링크 1에 있습니다.
이미지를 위와같은 형태로 출력하면 justify 정렬이 잘 되는데..
이미지 더 불러오기를 하면 추가로 덧붙여지는 item 들에는 정렬이 안되네요.. 에효;;
댓글 7개
cshop
13년 전
css 는 페이지가 로딩될때 한번 먹힙니다.
지금 사진을 페이지 로딩이 끝난후 asynchronously 불러오고 계신데(Ajax 방식), 당연히 그 후에 또 css 가 먹힐리가 없죠.
같은 이유로 php 도 한번 페이지 로딩이 끝난후에 다시 또 php 를 추가로 먹일수가 없는걸로 알고 있습니다.
css 를 jQuery 로 (아님 자스로) "이미지 더보기" 버튼을 누르실때 다시 한번 불러오시면 해결 됩니다.
"이미지 더보기" click event 때 이런식으로 추가로 css 를 append 해주시면 될겁니다.
$("head").append("<link rel='stylesheet' type='text/css' href='경로' />");
지금 사진을 페이지 로딩이 끝난후 asynchronously 불러오고 계신데(Ajax 방식), 당연히 그 후에 또 css 가 먹힐리가 없죠.
같은 이유로 php 도 한번 페이지 로딩이 끝난후에 다시 또 php 를 추가로 먹일수가 없는걸로 알고 있습니다.
css 를 jQuery 로 (아님 자스로) "이미지 더보기" 버튼을 누르실때 다시 한번 불러오시면 해결 됩니다.
"이미지 더보기" click event 때 이런식으로 추가로 css 를 append 해주시면 될겁니다.
$("head").append("<link rel='stylesheet' type='text/css' href='경로' />");
byfun
13년 전
잘못알고 계신듯 합니다. 동적으로 페이지 불러와서 내용을 추가해도 CSS 가 적용됩니다.
질문에 적진 않았으나 동적으로 item 들을 추가한 후에 list 에 다시 text-align:justify 속성을 추가해도 되지 않습니다.;;
질문에 적진 않았으나 동적으로 item 들을 추가한 후에 list 에 다시 text-align:justify 속성을 추가해도 되지 않습니다.;;
cshop
13년 전
저는 .list 에 css 가 적용이 안되던데....
사진은 아니였구요, 저는 모달이 뜨면서 그 모달내에 table (가격표) 가 뜨는거 였는데, 가격표 .list 에 text 가 align 이 먹지 않아 css 로 위 예제처럼 asynchronously 불러와서 해결했었습니다.
그런데도 IE 에서는 먹히지가 않아 무척고생을 했었는데.... 어떻게 해결했는지 기억도 잘 나지 않는다는, ....
아무튼 저는 위 방법으로 해결봤었습니다.
아, css 가 static 한 페이지 에서는 page loading 된 후 다 먹히지만, dynamically 만들어져서 불려오는 element 에 대해서는 css 가 안 먹히는 경우가 더 많은 걸로 알고 있습니다.
전에 stackoverflow 에서 찾아보니 이런 동일한 문제로 올라오는 질문들이 엄청 많던데....
제 생각이 틀린거면, byfun 님의 css 가 추가적 element 에 정상적으로 먹혀야 합니다. 아닌가요???????
사진은 아니였구요, 저는 모달이 뜨면서 그 모달내에 table (가격표) 가 뜨는거 였는데, 가격표 .list 에 text 가 align 이 먹지 않아 css 로 위 예제처럼 asynchronously 불러와서 해결했었습니다.
그런데도 IE 에서는 먹히지가 않아 무척고생을 했었는데.... 어떻게 해결했는지 기억도 잘 나지 않는다는, ....
아무튼 저는 위 방법으로 해결봤었습니다.
아, css 가 static 한 페이지 에서는 page loading 된 후 다 먹히지만, dynamically 만들어져서 불려오는 element 에 대해서는 css 가 안 먹히는 경우가 더 많은 걸로 알고 있습니다.
전에 stackoverflow 에서 찾아보니 이런 동일한 문제로 올라오는 질문들이 엄청 많던데....
제 생각이 틀린거면, byfun 님의 css 가 추가적 element 에 정상적으로 먹혀야 합니다. 아닌가요???????
13년 전
도움이 될런지 모르겠습니다만 new.sir.co.kr 스크랩 버튼 작업 시에 나타난 현상과 비슷한 것 아닐까 하는 생각이 들어 댓글 남깁니다.
css 에서 div 에 inline-block 을 주더라도 동적으로 엘리먼트가 생성될 때는 해당 엘리먼트의 default 라고 해야될까요 암튼 고유 속성이 적용되더라구요.
(생성이 맞는 건지 모르겠습니다. 암튼 비슷한 경우 ^^;;)
그래서 저도 span 으로 메세지 처리했던 것을 div 로 바꾼 적이 있는데 같은 유형의 문제가 아닐까 싶습니다.
css 에서 div 에 inline-block 을 주더라도 동적으로 엘리먼트가 생성될 때는 해당 엘리먼트의 default 라고 해야될까요 암튼 고유 속성이 적용되더라구요.
(생성이 맞는 건지 모르겠습니다. 암튼 비슷한 경우 ^^;;)
그래서 저도 span 으로 메세지 처리했던 것을 div 로 바꾼 적이 있는데 같은 유형의 문제가 아닐까 싶습니다.
cshop
13년 전
만들어져 있는걸 불러오는거니까 생성은 아니고, asynchronously call 한다고 보통들 말합니다. ^^ ㅎㅎㅎ
아, 지금 다시 구글링 해보니까 지운아빠님 생각이 정답이네요. ㅋㅋㅋ
when doing ajax (through Jquery or not) inline styling is not applied because only html is parsed (this in one of the reason <script></script> tags are not parsed as well)
오 호... ~~ ^^
그렇죠. 모든 css 가 적용이 안되는건 아니죠. async 로 띄우는 모달창들도 멀쩡하게 css 가 잘만 먹히니까. inline 의 css 만 이런 문제가 생긴답니다.
근데 이것도 100% 맞는건 아니구, 브라우져에 따라서 (특히 IE 의 경우) inline 이 아니더라도 css 가 안먹는 경우가 발생한답니다. 한마디로 지 맘이네요. -..-;;
(어쩐지 colorbox 도 가끔 IE 에서 깨지더라구요.)
아, 지금 다시 구글링 해보니까 지운아빠님 생각이 정답이네요. ㅋㅋㅋ
when doing ajax (through Jquery or not) inline styling is not applied because only html is parsed (this in one of the reason <script></script> tags are not parsed as well)
오 호... ~~ ^^
그렇죠. 모든 css 가 적용이 안되는건 아니죠. async 로 띄우는 모달창들도 멀쩡하게 css 가 잘만 먹히니까. inline 의 css 만 이런 문제가 생긴답니다.
근데 이것도 100% 맞는건 아니구, 브라우져에 따라서 (특히 IE 의 경우) inline 이 아니더라도 css 가 안먹는 경우가 발생한답니다. 한마디로 지 맘이네요. -..-;;
(어쩐지 colorbox 도 가끔 IE 에서 깨지더라구요.)
byfun
13년 전
이래저래 삽질 후 .. 그냥 페이지 방식으로 가기로 결정합니다 ;;;;;
두분 답변 감사드립니다. T_T
두분 답변 감사드립니다. T_T
takumi22
12년 전
잘 해결하세요
게시글 목록
| 번호 | 제목 |
|---|---|
| 4405 | |
| 17973 |
Mobile
서브도메인 연결 오류...해결 부탁드립니다.
1
|
| 17969 | |
| 30568 |
HTML
고수님들 도움좀 부탁드립니다!
|
| 17965 |
PHP
웹 프로그래밍 강의사이트
3
|
| 17962 |
JavaScript
PhotoSwipe(갤러리) js 소스 해결좀 부탁드립니다.
2
|
| 17959 | |
| 17955 |
JavaScript
초보자 궁금한게 있습니다!
3
|
| 17953 | |
| 17950 | |
| 17947 | |
| 4403 | |
| 17944 |
jQuery
메뉴에서 무엇이 문제인가요?
2
|
| 17943 |
JavaScript
스크립트 소숫점 자르기
|
| 17941 | |
| 17939 |
Linux
리눅스 yum으로 apm설치하기
1
|
| 17935 |
jQuery
FAQ 예제입니다.
3
|
| 17928 | |
| 4391 | |
| 17926 |
Flash
저도 또 플래시 기본플레이어 질문이네요;
1
|
| 17923 | |
| 17920 |
jQuery
jquery 라이브러리 개발자 사이트
2
|
| 17917 |
jQuery
[질문] 이미지 메뉴 페이드 효과 넣고 싶어요.
2
|
| 26380 | |
| 17916 |
PHP
멀티스크린 대응
|
| 30565 |
HTML
[접기 펴기]간단 소스 문의좀..
2
|
| 17910 | |
| 17907 |
JavaScript
숫자 계산시 NaN 이 나올경우질문드립니다
2
|
| 17905 |
MySQL
ms sql 작업하실분 구합니다.
1
|
| 30555 | |
| 17904 |
MySQL
ssh 터널링을 통한 mysql 접속
|
| 30552 | |
| 17901 |
JavaScript
버튼 롤아웃시에 버튼 온 이미지를 줄수있는 방법 좀 갈켜 주세요.
2
|
| 17900 |
JavaScript
따라다니는 배너 스크립트인데요
|
| 17898 |
Flash
플래시가 검게만 보입니다 ㅠㅠ
1
|
| 30549 | |
| 17895 | |
| 26379 | |
| 26378 | |
| 26377 | |
| 17893 | |
| 17891 |
JavaScript
메뉴바 - 이런걸 원하시는건가??
1
|
| 17888 | |
| 17885 | |
| 17883 | |
| 17882 | |
| 17861 | |
| 17859 |
Flash
플레시 메뉴 만들기중 질문드립니다.
1
|
| 17857 | |
| 4388 | |
| 24413 | |
| 4383 | |
| 17849 | |
| 17847 |
PHP
효과에 대한 질문입니다.
1
|
| 17845 |
Flash
플래시 플레이어가 안나오네요!
1
|
| 17844 |
Linux
mod_ssl 설치 문제
|
| 17839 | |
| 17838 | |
| 30548 |
HTML
이미지 게시판 질문드려요
|
| 17836 |
JavaScript
메뉴바 도움 부탁드립니다.
1
|
| 17833 | |
| 17831 | |
| 17827 |
JavaScript
모바일 홈페이지 연동소스들중에 베가레이스2 기종이 연동이 안된다고 하는데
3
|
| 17826 | |
| 17823 |
JavaScript
네이버 나눔글꼴 적용 좀 봐 주세요
2
|
| 17820 |
MySQL
중복제거 쿼리문좀 간절히 부탁드립니다^^
2
|
| 17818 | |
| 24412 | |
| 30547 |
HTML
모바일 퍼스트와 반응형 웹
|
| 17814 |
MySQL
정중히 문제해결 도움 요청합니다
3
|
| 4377 | |
| 30544 |
HTML
프레임 문의 드려요 ^^;;
2
|
| 17813 |
JavaScript
새창뜨우기 소스에요
|
| 17810 |
기타
서브도메인
2
|
| 26373 | |
| 17804 | |
| 30543 |
HTML
HTML5 스터디가 가능할까요?
|
| 17803 | |
| 4370 | |
| 17801 |
JavaScript
스맛폰 에서 보면 메뉴가 뒤로 숨어서 안보이는데요?
1
|
| 17796 | |
| 26372 | |
| 17794 | |
| 30536 |
HTML
반응형 웹 스타디 초안?
6
|
| 17791 |
JavaScript
클래스 안에 태그의 src 추출
2
|
| 4364 | |
| 17789 | |
| 30535 |
HTML
opacity 질문입니다.!
|
| 17788 |
JavaScript
페이지 경고창 없애고 무한 롤링
|
| 30527 | |
| 30525 | |
| 30524 | |
| 4358 | |
| 30521 | |
| 17781 |
기타
DTD가 뭔가요?
6
|
| 26371 | |
| 17776 | |
| 4343 | |
| 17772 | |
| 17768 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기