게시판 리스트에서 가로이미지 설정 !!??
관련링크
본문
게시판에서 가로이미지 설정을 4 으로 했습니다만,
브라우져에 따라 다르게 나오네요 ... 방법이 있을까요 !!??
감사 합니다 !!!!!
아래, 크롬, microsoft Edge, 네이버웨일, 정상적으로 가로 4개로 나옴니다.
아래, Explorer 가로 6개로 나옵니다 ... ㅠㅠ
소스참조 :
list.php
<div class="list">
<?php
for ($i=0; $i<count($list); $i++) {
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
echo "<div class='book-cover'>";
echo "<a href='". $list[$i]['href']. "'>";
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
} else {
$img_content = '<span class="no_image">no image</span>';
}
echo $img_content;
echo "</a></div>";
} ?>
</div>
style.css
.book {
transition: opacity 0.4s 0.2s;
perspective: 250vw;
}
.book .list{
display: flex;
flex-wrap: wrap;
position: relative;
padding: 20px;
/* justify-content: space-between; */
background: rgba(0, 0, 0, 0) url("./img/wall-bookshelf.png") repeat-y 0px 0px padding-box border-box;
}
.book .list .book-cover {
margin: 4px;
flex: 0 1 calc(25% - 10px);
margin-bottom: 55px;
}
.book .page:nth-child(even) {
clear: both;
}
.book .pages {
/* width: 60vw; */
width: 920px;
/* height: 44vw; */
height: 650px;
position: relative;
transform-style: preserve-3d;
backface-visibility: hidden;
border-radius: 4px;
/*box-shadow: 0 0 0 1px #e3dfd8;*/
}
.book .page {
float: none;
clear: none;
padding: 20px;
margin: 0;
position: absolute;
top: 0;
/* width: 30vw; */
width: 460px;
/* height: 44vw; */
height: 650px;
transform-origin: 0 0;
transition: transform 1.4s;
backface-visibility: hidden;
transform-style: preserve-3d;
cursor: pointer;
user-select: none;
background-color: #f0f0f0;
}
.book .page pre {
white-space: pre-wrap;
overflow: hidden;
font-family: 'Nanum Myeongjo', serif;
line-height: 180%;
}
.book .page:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.7s;
z-index: 2;
}
.book .page:nth-child(odd) {
pointer-events: all;
transform: rotateY(0deg);
right: 0;
border-radius: 0 4px 4px 0;
background-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 10%);
}
.book .page:nth-child(odd):hover {
transform: rotateY(-15deg);
}
.book .page:nth-child(odd):hover:before {
background: rgba(0, 0, 0, 0.03);
}
.book .page:nth-child(odd):before {
background: rgba(0, 0, 0, 0);
}
.book .page:nth-child(even) {
pointer-events: none;
transform: rotateY(180deg);
transform-origin: 100% 0;
left: 0;
border-radius: 4px 0 0 4px;
border-color: black;
background-image: linear-gradient(to left, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 10%);
}
.book .page:nth-child(even):before {
background: rgba(0, 0, 0, 0.2);
}
.book .page.grabbing {
transition: none;
}
.book .page.flipped:nth-child(odd) {
pointer-events: none;
transform: rotateY(-180deg);
}
.book .page.flipped:nth-child(odd):before {
background: rgba(0, 0, 0, 0.2);
}
.book .page.flipped:nth-child(even) {
pointer-events: all;
transform: rotateY(0deg);
}
.book .page.flipped:nth-child(even):hover {
transform: rotateY(15deg);
}
.book .page.flipped:nth-child(even):hover:before {
background: rgba(0, 0, 0, 0.03);
}
.book .page.flipped:nth-child(even):before {
background: rgba(0, 0, 0, 0);
}