고정 헤더 영역
상세 컨텐츠
본문
반응형
가끔 DIV를 테이블과 같이 사용할 경우가 생깁니다.
아래는 제가 사용할때 참고한 예제 입니다.
<!doctype html>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.container {
display: table;
}
.row {
display: table-row;
}
.left, .middle, .right {
display: table-cell;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('form input').keydown(function(e) {
if (e.keyCode == 13) {
$('form').submit();
}
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="left" style="background-color:red">
<h4>1.Left Col</h4>
</div>
<div class="middle" style="background-color:yellow">
<h4>1.Middle Col</h4>
</div>
<div class="right" style="background-color:blue">
<h4>1.Right Col</h4>
</div>
</div>
<div class="row">
<div class="left" style="background-color:purple">
<h4>2.Left Col</h4>
</div>
<div class="middle" style="background-color:green">
<h4>2.Middle Col</h4>
</div>
<div class="right" style="background-color:pink">
<h4>2.Right Col</h4>
</div>
</div>
</div>
</body>
</html>
참고: https://snook.ca/archives/html_and_css/getting_your_di
반응형
'JavaScript & HTML' 카테고리의 다른 글
| jquery 글자 byte, 문자열 byte(바이트) 길이 체크하기 예제 (1) | 2016.09.07 |
|---|---|
| Html 색상표 모음, 색상코드표 (RGB), 이미지X, 복사 가능 (0) | 2016.09.07 |
| jquery enter key event submit (jquery 엔터키 이벤트) (0) | 2016.08.30 |
| jQuery, JavaScript 새로고침(reload) (0) | 2016.08.25 |
| jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name (2) | 2016.08.18 |
댓글 영역