답변 3개
채택된 답변
+20 포인트
3년 전
이미지가 세로로 나열되는 이유는 보통 아래 경우입니다.
1. 부모 요소 너비 불충분한 경우
2. 이미지가 블럭요소 설정된 경우
3. 이미지가 position 처리된 경우
도저히 혼자서 안 될 땐 주소 공개하고 도움을 구해보세요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 4개
e
3년 전
�
3년 전
li.gallery_li에
width: 20%;
display: inline-block;
이 정도면 넣어도 가로로 나오는요.
width: 20%;
display: inline-block;
이 정도면 넣어도 가로로 나오는요.
s
3년 전
해당 페이지 상단에 아래 코드 추가해 보세요.
<style>
.gallery_li {
float:left;
width:25%;
box-sizing:border-box;
}
.gallery_li img {
width:100%;
height:auto;
}
</style>
PS. 아래 글 참고해 보세요.
https://homzzang.com/b/css-349
<style>
.gallery_li {
float:left;
width:25%;
box-sizing:border-box;
}
.gallery_li img {
width:100%;
height:auto;
}
</style>
PS. 아래 글 참고해 보세요.
https://homzzang.com/b/css-349
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 3개
e
3년 전
최신글 스킨 내용입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
$thumb_width = 510;
$thumb_height = 350;
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>
<div class="pic_lt">
<ul>
<?php
for ($i=0; $i<$list_count; $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
if($thumb['src']) {
$img = $thumb['src'];
} else {
$img = G5_IMG_URL.'/no_img.png';
$thumb['alt'] = '이미지가 없습니다.';
}
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
$wr_href = get_pretty_url($bo_table, $list[$i]['wr_id']);
?>
<li class="gallery_li">
<a href="<?php echo $wr_href; ?>" class="lt_img"><?php echo run_replace('thumb_image_tag', $img_content, $thumb); ?></a>
<?php
echo "<a href=\"".$wr_href."\"> ";
if ($list[$i]['is_notice'])
echo "<strong>".$list[$i]['subject']."</strong>";
else
// echo $list[$i]['subject'];
echo "</a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
// echo $list[$i]['icon_reply']." ";
// if ($list[$i]['icon_file']) echo " <i class=\"fa fa-download\" aria-hidden=\"true\"></i>" ;
// if ($list[$i]['icon_link']) echo " <i class=\"fa fa-link\" aria-hidden=\"true\"></i>" ;
if ($list[$i]['comment_cnt']) echo "
<span class=\"lt_cmt\">".$list[$i]['wr_comment']."</span>";
?>
</li>
<?php } ?>
<?php if ($list_count == 0) { //게시물이 없을 때 ?>
<li class="empty_li">게시물이 없습니다.</li>
<?php } ?>
</ul>
</div>
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
$thumb_width = 510;
$thumb_height = 350;
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>
<div class="pic_lt">
<ul>
<?php
for ($i=0; $i<$list_count; $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);
if($thumb['src']) {
$img = $thumb['src'];
} else {
$img = G5_IMG_URL.'/no_img.png';
$thumb['alt'] = '이미지가 없습니다.';
}
$img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';
$wr_href = get_pretty_url($bo_table, $list[$i]['wr_id']);
?>
<li class="gallery_li">
<a href="<?php echo $wr_href; ?>" class="lt_img"><?php echo run_replace('thumb_image_tag', $img_content, $thumb); ?></a>
<?php
echo "<a href=\"".$wr_href."\"> ";
if ($list[$i]['is_notice'])
echo "<strong>".$list[$i]['subject']."</strong>";
else
// echo $list[$i]['subject'];
echo "</a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
// echo $list[$i]['icon_reply']." ";
// if ($list[$i]['icon_file']) echo " <i class=\"fa fa-download\" aria-hidden=\"true\"></i>" ;
// if ($list[$i]['icon_link']) echo " <i class=\"fa fa-link\" aria-hidden=\"true\"></i>" ;
if ($list[$i]['comment_cnt']) echo "
<span class=\"lt_cmt\">".$list[$i]['wr_comment']."</span>";
?>
</li>
<?php } ?>
<?php if ($list_count == 0) { //게시물이 없을 때 ?>
<li class="empty_li">게시물이 없습니다.</li>
<?php } ?>
</ul>
</div>
e
3년 전
이건 css이구요
/* 새글 스킨 (latest) */
.pic_lt {position:relative;margin-bottom:20px;background:#fff}
.pic_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe}
.pic_lt .lat_title a {color:#000;display:inline-block;position:relative}
.pic_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center;}
.pic_lt .lt_more:hover {color:#777}
.pic_lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_lt ul {margin: 0 -10px}
.pic_lt li {float:left;width:25%;padding:0 10px}
.pic_lt li.gallery_li:nth-child(4n+1) {clear: both!important}
.pic_lt li .lt_img {margin:5px 0;display:block}
.pic_lt li .lt_img img, .pic_lt li .lt_img video {width:100%;height:auto}
.pic_lt li a:hover {color:#a22121}
.pic_lt li .fa-heart {color:#ff0000}
.pic_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.pic_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.pic_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-caret-right {color:#bbb}
.pic_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt .profile_img img{border-radius:50%}
.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}
.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}
.pic_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.pic_lt .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.pic_lt .lt_more:hover {color:#777}
/* 새글 스킨 (latest) */
.pic_lt {position:relative;margin-bottom:20px;background:#fff}
.pic_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe}
.pic_lt .lat_title a {color:#000;display:inline-block;position:relative}
.pic_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center;}
.pic_lt .lt_more:hover {color:#777}
.pic_lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_lt ul {margin: 0 -10px}
.pic_lt li {float:left;width:25%;padding:0 10px}
.pic_lt li.gallery_li:nth-child(4n+1) {clear: both!important}
.pic_lt li .lt_img {margin:5px 0;display:block}
.pic_lt li .lt_img img, .pic_lt li .lt_img video {width:100%;height:auto}
.pic_lt li a:hover {color:#a22121}
.pic_lt li .fa-heart {color:#ff0000}
.pic_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.pic_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.pic_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-caret-right {color:#bbb}
.pic_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt .profile_img img{border-radius:50%}
.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}
.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}
.pic_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.pic_lt .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.pic_lt .lt_more:hover {color:#777}
댓글을 작성하려면 로그인이 필요합니다.
3년 전
일단 아래처럼 코드를 변경하고 확인해보세요
불필요한 table 테그가 있어서 제거했습니다
|
1. 현장약도
|
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
e
3년 전
빈페이지를 만들고 이렇게 넣었는데도 같은 현상입니다. TT
<?php
include_once('./_common.php');
define('_new_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_PATH.'/head.php');
?>
<script language='javascript'>
<!--window.setTimeout('window.location.reload()',30000); //30초마다 페이지 새로고침-->
</script>
<STYLE>
table, th, td {
border-collapse: collapse;
}
th, td {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
</STYLE>
</head>
<table border="3" width="100%" bordercolor="#00FF7F">
<tr>
<td>
<div align="center" style="width:100%; height: 100%; font-family:견고딕;font-size: 3.5em;font-weight: bold ; background-color:#00FF7F; border-radius: 0px 0px 30px 0px;">
1. 현장약도
</div>
<br>
<?php
echo latest('pic_block', 'gallery', 4, 23); // 약도 불러오기
?>
</td>
</tr>
</table>
<?php
include_once('./_common.php');
define('_new_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_PATH.'/head.php');
?>
<script language='javascript'>
<!--window.setTimeout('window.location.reload()',30000); //30초마다 페이지 새로고침-->
</script>
<STYLE>
table, th, td {
border-collapse: collapse;
}
th, td {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
</STYLE>
</head>
<table border="3" width="100%" bordercolor="#00FF7F">
<tr>
<td>
<div align="center" style="width:100%; height: 100%; font-family:견고딕;font-size: 3.5em;font-weight: bold ; background-color:#00FF7F; border-radius: 0px 0px 30px 0px;">
1. 현장약도
</div>
<br>
<?php
echo latest('pic_block', 'gallery', 4, 23); // 약도 불러오기
?>
</td>
</tr>
</table>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택

http://qhrrn.shop/