세로정렬 개수 질문합니다

세로정렬 개수 질문합니다

QA

세로정렬 개수 질문합니다

본문

978132477_1604948447.5597.png978132477_1604948450.5552.png

 

이렇게 창이 좁아지면서 세로로 정렬될때 

 

1개씩 정렬되는것을 2개씩 세로정렬로 고정하는법 질문드립니다.

이 질문에 댓글 쓰기 :

답변 3

html, css가 어떻게 되어 있는지 모르겠지만 저 버튼 둘러싸고 있는 div 영역의 넓이를 늘려보세요

.tl_title_box_wrap {width:200; height:auto; padding:150px 20px; clear:both; background-position:center; background-repeat:no-repeat; background-size:cover}
.tl_title_box_wrap li {position:relative; width:23.5%; min-height:150px; background-color:#fff; margin-left:2%; float:left; cursor:pointer;  -webkit-transition: all 0.4s; transition: all 0.4s; background-position:center; background-size:cover; background-repeat:no-repeat}
.tl_title_box_wrap li .bg { background-color:#2c3856; color:#fff; opacity:0; position:absolute; width:100%; height:100%; top:0;left:0; z-index:2}
.tl_title_box_wrap li:hover .bg {opacity: 1; -webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; }
.tl_title_box_wrap li:hover {-webkit-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-ms-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-webkit-transform:translateY(-25px);transform:translateY(-25px)}


.tl_title_box_wrap li .txt_wrap{width:100%;height:100%; position:absolute; top:0; left:0; box-sizing:border-box;overflow:hidden;padding:40px;color:#fff;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; opacity:1; display:table; z-index:2;}
.tl_title_box_wrap li:hover .txt_wrap { opacity:1; color:#fff}
.tl_title_box_wrap li:hover .txt_wrap .cell I { color:#FFF}
.tl_title_box_wrap li:hover .txt_wrap .cell h2 { color:#FFF}
.tl_title_box_wrap li:hover .txt_wrap .cell p { color:#fff}
.tl_title_box_wrap li .txt_wrap .cell { text-align:center;width:100%;display: table-cell; vertical-align: middle;}
.tl_title_box_wrap li .txt_wrap .cell i { font-size:35px; padding-bottom:20px; color:#1a1a1a}
.tl_title_box_wrap li .txt_wrap .cell h2 { font-size:24px; color:#1a1a1a; margin:0; font-weight:bold;}
.tl_title_box_wrap li .txt_wrap .cell p { font-size:17px; color:#444; letter-spacing:-0.02em; font-weight:300; padding-top:50px; word-break:keep-all; }
.tl_title_box_wrap li:nth-child(4n+1) { margin-left:0}


입니다. 영역을 넓히면 더 길쭉해져요

아래 좌표들 공부하시면 스스로 해결 가능하실 듯...

너비를 50%로 줄이고, 옆으로 나란히 하면 원하시는 결과가 나올 겁니다.

 

수정 위치 찾기

https://homzzang.com/b/css-251

 

너비 줄이기 (※ 특히, 실질 width 주의)

https://homzzang.com/b/css?sca=box

 

옆으로 나란히 하기

https://homzzang.com/b/css-105

답변을 작성하시기 전에 로그인 해주세요.
전체 588
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT