HTML / CSS 다중 열
BrS
이것을 만드는 가장 좋은 방법을 찾으려고 노력하고 있습니다. 
검은 색 사각형은 작은 아이콘을 나타내며 특정 섹션의 제목과 단락이 있습니다. 아이콘은 제목에 정렬되어야합니다. 단락은 제목 바로 아래에 있어야합니다.
JoostS
음수 여백이있는 절대 위치 아이콘을 사용하고 너비가 33.33 % 인 3 개 열에 부동 소수점을 사용합니다.
HTML :
<div class="row">
<div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
<div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
<div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div>
</div>
CSS :
* {box-sizing: border-box;}
.row {overflow: auto;}
.col {width: 33.33%; float: left; padding-left: 100px;}
.col img {position: absolute; width: 80px; margin-left: -100px;}
@media (max-width: 991px) {.col {width: 100%;}}
작동하는 데모 : http://codepen.io/anon/pen/bqBNeL
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
DIV 배열-HTML CSS
- 2
CSS3 다중 열 목록
- 3
HTML 테이블 다중 열 필터링
- 4
HTML 다중 테이블 열 문제
- 5
style.css보다 HTML의 CSS가 더 중요합니다.
- 6
style.css보다 HTML의 CSS가 더 중요합니다.
- 7
HTML / CSS 목록 열 정렬
- 8
HTML / CSS 열 스크롤
- 9
HTML / CSS 동일 열 높이
- 10
CSS 다중 열 : 일부 열이 채워지지 않음
- 11
중앙 A 양식 HTML CSS
- 12
Angularjs 하나의 구성 요소 다중 뷰 (Html + css)
- 13
html / css 다중 범위를 수직으로 정렬
- 14
CSS3 : 제목이있는 다중 열 시스템
- 15
해상도가 다른 화면 중앙의 중앙 메뉴 (CSS / HTML)
- 16
JdbcTemplate 다중 열
- 17
PHP로 HTML 다중 선택 배열 잡기
- 18
php strpos 다중, html 태그 내의 문자열
- 19
CakePHP 다중 체크 박스 배열 HTML 올바른 방법
- 20
HTML : 문자열에 '중첩
- 21
다중 열, 다중 행 PIVOT
- 22
HTML 및 CSS : 부트 스트랩 열
- 23
오른쪽에 열 추가-HTML 및 CSS
- 24
부동 열의 최소 너비 (HTML \ CSS)
- 25
HTML 및 CSS에서 열 너비 변경
- 26
HTML 다중 선택은 배열을 반환하지 않습니다.
- 27
HTML / CSS에서 다중 ID를 사용하여 요소 색상 지정
- 28
내 CSS 스타일 중 일부만 내 html 파일에 나옵니다.
- 29
HTML, CSS, Javascript를 사용하는 웹 애플리케이션의 다중 시계
몇 마디 만하겠습니다