수다닷컴

  • 해외여행
    • 괌
    • 태국
    • 유럽
    • 일본
    • 필리핀
    • 미국
    • 중국
    • 기타여행
    • 싱가폴
  • 건강
    • 다이어트
    • 당뇨
    • 헬스
    • 건강음식
    • 건강기타
  • 컴퓨터
    • 프로그램 개발일반
    • C언어
    • 비주얼베이직
  • 결혼생활
    • 출산/육아
    • 결혼준비
    • 엄마이야기방
  • 일상생활
    • 면접
    • 취업
    • 진로선택
  • 교육
    • 교육일반
    • 아이교육
    • 토익
    • 해외연수
    • 영어
  • 취미생활
    • 음악
    • 자전거
    • 수영
    • 바이크
    • 축구
  • 기타
    • 강아지
    • 제주도여행
    • 국내여행
    • 기타일상
    • 애플
    • 휴대폰관련
  • 프로그램 개발일반
  • C언어
  • 비주얼베이직

float:left 위치에 대해서...

해뜰참

2023.04.01

저의질문이..너무 부족했네요 ^^ 다시정리해서 올리자면첨부한이미지를 보시면 순차적으로 이런식으로 나와야되는데div class=main_blog
pimg src=images/main/blog_2.jpg alt= //p
ul
li class=main_blog_ttlVestibulum auctor/li
li class=main_blog_sttlby Frank Bonzaga/li
liLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis et sem sed sollicitudin. Donec non/li
/ul
/div상단에 있는 소스가 반복적으로 프로그램화 시켜서 클래스명이 main_blog가 나오면 반복적으로 무조건 왼쪽으로 정렬해서 붙어라고 css에 정의를 했습니다. .main_conts { float:left; width:800px; position:relative}
.main_conts .main_blog { float:left; width:245px; padding:0 0 30px 21px; display:inline;}
.main_conts .main_blog ul { background:#1c1c1c; padding:22px;}
.main_conts .main_blog ul li { color:#b3b3b3; line-height:15px; font-size:11px;}
.main_conts .main_blog ul li.main_blog_ttl { font-size:16px; font-weight:bold; color:#fff; line-height:30px;}
.main_conts .main_blog ul li.main_blog_sttl { font-size:14px; color:#fff; line-height:30px;}

근데 문제는... 이미지부분이... 고정값이 아니라서 첨부한 이미지처럼 세로길이가 다양할건데 (갤러리게시판형태입니다.)
그러다보니 무조건 왼쪽으로 순차적으로 붙어라고 했더니 http://hwanlife.com/
사이트처럼 1번의 세로가 길다보니 1번아래에 4번그림이 와야되는데(첨부한이미지) 2번아래로 4번그림이 왔더라구요
이럴때 세로의 영향안받고
div class=main_blog
pimg src=images/main/blog_1.jpg alt= //p
ul
li class=main_blog_ttlVestibulum auctor/li
li class=main_blog_sttlby Frank Bonzaga/li
liLorem ipsum dolor sit amet, consectetur adipiscing elit. ollicitudin. Donec non/li
/ul
/div상위html 이 반복적으로 노출되게할려면 어찌해야될까요? css 를 어떻게 수정해야될까요?참고로 갤러리형태의 게시판입니다.

신청하기





COMMENT

댓글을 입력해주세요. 비속어와 욕설은 삼가해주세요.

  • 말글

    개발적인 요소랑 상관없는데요.. 토드님이 댓글 다신 플러그인 쓰는게 맞는거같은데;

  • 은별

    음 이게 플러그인 사용할수없는데 프로그래머가 개발할거라서 ㅎㅎ 그러니css를 구현해줘야해요 ㅎㅎ

  • 후회중

    mhjj77 님 너무감사해요 저의 질문이 너무 충분하지 않았네요 다시 올려드려요 ~
    요점은 갤러리형태라고 생각하심되요 그런데 세로가 다른 형태의 게시판이라는거죠~~
    그러다보니 위치가 안맞네요~~~^^
    잘부탁드립니다. ^^ 그리고 감사합니다.

  • 마루나

    음.. 반응형으로 움직여야 된다는 말씀이신가요? 아니시면 content내부에 있는 blog그룹들이 가로로 3개씩 정렬되어 있잖아요? 그걸 세로로 3줄로 정렬해서 퍼센트로 주시면 어떨지요? 이미지엔 100퍼센트 값을주고 각 줄의 width값은 100을 기준으로 3줄이니까 한줄당 33%를 주는 겁니다 만약 이것도 아니시라면... 다른 방법을 강구해봐야겠네요^^;

  • 갤원

    님처럼 말씀하신부분은...절대적인 값의 위치값일때 사용하면 좋은데..전 이부분이..프로그램으로 연동되는부분이라서..그러니깐 메인에 뿌려지는 갤러리형태의 박스가 이미지크기에 따라 유동적으로 바뀌는거라서...
    절대값을 넣을수가 없을듯해서요..이게 일종의 갤러리게시판형태인거죠..메인에서 갤러리형태로 뿌려지는데..박스크기가 다르다는거죠. ^^

  • 겨슬

    참고해주신 사이트를 보니 div class=\main_conts\태그에 position:relative를 부여하고 나머지 div class=\main_blog\마다 position:absolute를 부여한 뒤, top과 left 등에 수치값을 넣어 조정하시면 될 것 같습니다..

번호 제 목 글쓴이 날짜
2695468 자바랑 이클립스에서요.. 스킬 2025-05-21
2695375 Mysql 연동하는 자바 질문있습니다. 아리솔 2025-05-20
2695319 파워포인트 파일을 저장할 수 있을까요? 시윤 2025-05-19
2695289 [질문]Tween 값의 정도를 알고 싶습니다. 타마 2025-05-19
2695238 c 와 c++의 시작 (10) ChocoHoilc 2025-05-18
2695215 탑메뉴의 repeat-x .배경이 두가지에요ㅠ ㅠ 널위해 2025-05-18
2695187 자바스크립트와 자바의 import에 관해서 질문드려요 (1) 무슬 2025-05-18
2695116 테마 문의 (해당 사이트와 같은 테마 혹은 플러그인) Sweet 2025-05-17
2695084 [질문] starDrag()와 같은 함수 만들기 민구 2025-05-17
2695055 폰트 질문드립니다. 할인사이트에 많이 쓰는 굵은 숫자폰트.. (2) 일본녀 2025-05-17
2695025 [개발툴]Jcreator 에 관해서... (5) 에녹 2025-05-16
2695006 BitmapData ..무비클립에 적용 할수 있을까요? (1) 날위해 2025-05-16
2694977 C언어 소스문제점좀요 ... (2) 들꿈 2025-05-16
2694950 자바스크립트로 화면에 내용을 뿌려줄때 접근성 (3) 꺆잉 2025-05-16
2694921 보더 레이아웃 안에 플로우 레이아웃 넣는방법? 초롱 2025-05-15
2694894 웹 프로그래밍 관련해서 질문합니다. 창의적 2025-05-15
2694868 컨택트 폼 7에서 textarea 높이 조정 영글 2025-05-15
2694818 line-height값이 적용이 안되는데 왜 그런 거예요?. letter-spacing,line-height의 기준?? (2) 풍란 2025-05-14
2694795 이것 어떻게 좀 해결좀;; (3) 개럭시 2025-05-14
2694724 코딩시 폰트 문제; ㅠ 후력 2025-05-13
<<  이전  1 2 3 4 5 6 7 8 9 10  다음  >>

수다닷컴 | 여러분과 함께하는 수다토크 커뮤니티 수다닷컴에 오신것을 환영합니다.
사업자등록번호 : 117-07-92748 상호 : 진달래여행사 대표자 : 명현재 서울시 강서구 방화동 890번지 푸르지오 107동 306호
copyright 2011 게시글 삭제 및 기타 문의 : clairacademy@naver.com