안녕하세요 메인페이지 최근갤러리 정렬 질문입니다
안녕하세요 혼자 이것저것 정보보면서 배우고 있는 사람입니다
메인페이지에 최근갤러리가 4개 2줄로 가운데로 정렬시키고 여백을 서로 각각 조금씩 주고싶습니다
/* 새글 스킨 (latest) */
.lat_pic_basic > h2{display:none;} .lat_pic_basic .lat_pic_basic_inner{font-size:0;} .lat_pic_basic .lat_pic_basic_item{display:inline-block; position:relative; width:25%; vertical-align:top; font-size:15px;} .lat_pic_basic .lat_pic_basic_item:after{content:""; position:absolute; top:0; left:20; bottom:0; right:0; background:rgba(0,0,0,.75); opacity:0; z-index:-1; -webkit-transition:all .3s ease; transition:all .3s ease;} .lat_pic_basic .lat_pic_basic_item a{display:block; position:relative;} .lat_pic_basic .lat_pic_basic_item img{100%;}
.lat_pic_basic .pic_thumb{position:relative; padding-top:68.4684%;} .lat_pic_basic .pic_thumb > p{position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden;} .lat_pic_basic .pic_thumb > p img{width:80%; height:80%; object-fit:cover;}
.lat_pic_basic .pic_title{position:absolute; top:20px; left:0; bottom:0; right:0; text-align:center; opacity:0; webkit-transition:all .4s ease; transition:all .4s ease;} .lat_pic_basic .pic_title .pic_title_inner{display:inline-block; padding:4px 15px; border-radius:20px; background:#fff; color:#222;}
/* 갤러리 베이직 hover */ .lat_pic_basic .lat_pic_basic_item:hover:after{opacity:1; z-index:2} .lat_pic_basic .lat_pic_basic_item:hover .pic_title{opacity:1; z-index:4; top:40%;}
.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0} .pic_lt .empty_li:before {background:none;padding:0}
지금 어느정도 수정을 해봤는데 왼쪽으로 최근갤러리 4개가 출력되는데 너무 왼쪽으로 치우쳐져 있으며
가운데로 정렬 각각 이미지 1개씩 여백을 조금씩 주고싶은데 어디쪽을 수정해야 할까요?
감사합니다
답변 3개
소스만으로 정확하지 않은데 아래와 같이 수정해보세요.
.lat_pic_basic .lat_pic_basic_item{display:inline-block; position:relative; width:50%; text-align:center; vertical-align:top; font-size:15px;}
답변에 대한 댓글 2개
padding 이나 margin 을 수정해야 합니다.
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p>/* 새글 스킨 (latest) */</p>
<p>.lat_pic_basic > h2{display:none;}
.lat_pic_basic .lat_pic_basic_inner{font-size:0;}
.lat_pic_basic .lat_pic_basic_item{display:inline-block; position:relative; width:25%; vertical-align:top; font-size:15px;}
.lat_pic_basic .lat_pic_basic_item:after{content:""; position:absolute; top:0; left:20; bottom:0; right:0; background:rgba(0,0,0,.75); opacity:0; z-index:-1;
-webkit-transition:all .3s ease; transition:all .3s ease;}
.lat_pic_basic .lat_pic_basic_item a{display:block; position:relative;}
.lat_pic_basic .lat_pic_basic_item img{100%;}</p>
<p>.lat_pic_basic .pic_thumb{position:relative; padding-top:68.4684%;}
.lat_pic_basic .pic_thumb > p{position:absolute; top:0; left:0; bottom:0; right:0; overflow:hidden;}
.lat_pic_basic .pic_thumb > p img{width:80%; height:80%; object-fit:cover;}</p>
<p>.lat_pic_basic .pic_title{position:absolute; top:20px; left:0; bottom:0; right:0; text-align:center; opacity:0; webkit-transition:all .4s ease; transition:all .4s ease;}
.lat_pic_basic .pic_title .pic_title_inner{display:inline-block; padding:4px 15px; border-radius:20px; background:#fff; color:#222;}</p>
<p>/* 갤러리 베이직 hover */
.lat_pic_basic .lat_pic_basic_item:hover:after{opacity:1; z-index:2}
.lat_pic_basic .lat_pic_basic_item:hover .pic_title{opacity:1; z-index:4; top:40%;}</p>
<p>.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}
아 네 몰랐네요..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
혹시 실례가 안된다면 각각 1줄당 4개씩 이미지가 출력되는데 각각 이미지 사이에 여백이 너무 벌어져서 그러는데 이것도 혹시 어디부분을 수정해야할까요?