css 관련해서 문의드립니다.
에드윈
css 기초가 부족하다보니 기존 작업물을 가지고 변형해서 사용을 하고 있습니다.
기존 형태가 동일한 사이즈의 이미지들로 구성이 되어 block처리고 진행을 하였는데
변형된 작업이 생겨 문의 드립니다.
기존엔 이미지가 2장형태로 나열식이었습니다.
지금은 최상단 부분에 세로로 2장이 합쳐진 형태로 변경되어 기존걸로는 좀 어렵네요.
이런 형태로 코딩을 하려면 어떻게 하는게 맞는건지요?
div class=box-list
p class=box
img src=./images/main/box.png alt=투명영역 /
/p
p class=box
a href=#
img src=./images/main/img.jpg/
span
strong타이틀/strong
em가격/em
/span
/a
/p
p class=box
img src=./images/main/box.png alt=투명영역 /
/p
p class=box
a href=#
img src=./images/main/img.jpg/
span
strong타이틀/strong
em가격/em
/span
/a
/p
p class=box
a href=#
img src=./images/main/img.jpg/
span
strong타이틀/strong
em가격/em
/span
/a
/p
p class=box
a href=#
img src=./images/main/img.jpg/
span
strong타이틀/strong
em가격/em
/span
/a
/p
p class=bigBox
a href=#
img src=./images/main/bigimg.jpg/
span
strong타이틀/strong
em가격/em
/span
/a
/p
/div#css
.box-list {overflow:hidden}
.box-list a {position:relative;float:left;display:block;width:238px;height:120px;background:#fff;}
.box-list a {text-decoration : none;}
.box-list a:hover {text-decoration : none;}
.box-list {overflow:hidden;}
.box-list {margin :4px 4px 4px 0px; }
.box-list .box {position:relative;float:left;display:block;width:238px;height:120px;}
.box-list .box img {position:absolute;}
.box-list .box {margin-bottom:4px;margin-right:4px;}
.box-list span {position:absolute;top:36px;left:10px;display:block;width:238px;text-align:left;}
.box-list span * {display:block; font-style:normal; font-weight:normal; font-size:11px; line-height:15px;}
.box-list span strong {color:#3e3e3e;}
.box-list span em {color:#e5004f;}
.box-list .bigBox {overflow:hidden}
.box-list .bigBox {position:absolute;top:94px;left:10px;float:left;display:block;width:238px;height:244px;}
.box-list .bigBox span {position:absolute;top:77px;left:24px;display:block;width:238px;text-align:left;}
.box-list .bigBox span * {display:block; font-style:normal; font-weight:normal; font-size:11px; line-height:15px;}
.box-list .bigBox span strong {color:#3e3e3e;}
.box-list .bigBox span em {color:#e5004f;}
위 소스처럼 배열부분에 빈이미지로 채우고 맨하단에 absolute로 잡는게 아닌듯해서 문의 드립니다.
그리고 익스플로어 버전에 따라 중앙정렬을 하니 7버전은 정확히 들어가는 8버전은 리스트 우측으로 최하단 가장 큰이미지가 붙어버리네요.
좀 정확한 css를 정리하고 싶어서 문의드립니다.
읽어주셔서 감사합니다.
-
해길
방법은 여러가지에요^^ 제가 말씀드린게 꼭 답은 아니랍니다
-
초코홀릭
넵. 자료찾아보고 적용해 보겠습니다. 지식 공유해주셔서 감사드립니다.
-
중국드립
상단을 하나의 div로 감싸고 그안에 두개의 div를 써서 float을 주고
아래에 div에는 content display clear both 를 주면 될거같아용 -
아리
답변 감사드립니다. 지금 box와 bigBox로 css를 구분했는데 3가지 형태로 만들어야 하는건가요?
clear:both를 찾아보니 한줄을 모두 사용하는거라고 하네요. -
봄해
float:left, float:right, clear:both 만 이용해도 되겠는데요 -0-;