만들긴 만들었는.. -_-;; ie7 이하는 고려하지 않아도 되서 display table을 사용... span 두 번 쓴게 마음에 걸리는.. ㄷㄷ;;
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<style>
.dlTable{overflow:hidden;width:100%;border-top:2px solid #aaa}
.dlTable > div{position:relative;overflow:hidden;border-bottom:1px solid #ddd}
.dlTable dl{float:left}
.dlTable dt{position:absolute;top:0;left:0;width:79px;height:100%;padding:0 0 0 20px;border-right:1px solid #ddd;background:#f7f7f7}
.dlTable dd{margin-left:100px;padding:9px 10px 7px}
.dlTable dt > span{display:table;position:relative;width:100%;height:100%}
.dlTable dt > span > span{display:table-cell;vertical-align:middle}
.dlTable dl + dl dt{left:50%;border-left:1px solid #ddd}
.dlTable .singleCell dl{width:100%}
.dlTable .doubleCell dl{width:50%}
@media all and (max-width:480px){
.dlTable > div{border-bottom:0}
.dlTable dl{position:relative;overflow:hidden;float:left;width:100%;border-bottom:1px solid #ddd}
.dlTable .doubleCell dl{width:100%}
.dlTable .doubleCell dl + dl dt{left:0;border-left:0}
}
</style>
</head>
<body>
<div class="dlTable">
<div class="doubleCell">
<dl>
<dt><span><span>타이틀</span></span></dt>
<dd>텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 </dd>
</dl>
<dl>
<dt><span><span>타이틀</span></span></dt>
<dd>텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 </dd>
</dl>
</div>
<div class="singleCell">
<dl>
<dt><span><span>타이틀</span></span></dt>
<dd>텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 </dd>
</dl>
</div>
</div>
</body>
</html>
728x90
반응형
'WWWEB > CSS' 카테고리의 다른 글
| css3 포토샵 효과: mix-blend-mode (0) | 2020.09.10 |
|---|---|
| 다크 모드 코딩 방법 ( css : prefers-color-scheme ) (1) | 2020.03.09 |
| 크롬에서 filter blur 이슈 관련 (0) | 2018.03.22 |
| [css] placeholder color 변경 (0) | 2017.07.21 |
| 인쇄 영역 여러장으로 나누기 css (0) | 2015.04.02 |
| 디바이스별 해상도 (0) | 2014.02.13 |
| 메일링 코딩 CSS Support 가이드 (0) | 2012.11.26 |
| ie9 핵 사용법 (+추가 : ie10 핵) (0) | 2012.09.28 |
댓글