CSS 관련 문의
본문
위 사진의 첫 그림을 두번째 그림처럼 2줄로 나오게 하고 싶은데 잘안되네요..ㅠ
어떻게 해야하는지 알려주시면 감사합니다.
float:left는 안되더군요..ㅠ
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>
<?php
$client_id = '***********';
$client_secret = '***********';
$query = '***********';
$sort = ''; // 정렬
$display = '10'; // 페이지당 목록 수
$start = ''; // 검색 시작 위치
// 요청 URL
$api_url .= "*********"; //
// 검색어, 필수 입력
$api_url .= "?query=".urlencode($query);
$ch = curl_init();
$ch_headers[] = "X-Naver-Client-Id: ".$client_id;
$ch_headers[] = "X-Naver-Client-Secret: ".$client_secret;
curl_setopt($ch, CURLOPT_URL, $api_url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $ch_headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
$result = json_decode($result, true);
$list = $result['items'];
?>
<!-- { -->
<div id="naver_list">
<div class="gw_wz">
<ul>
<?php
for ($i=0; $i<$display; $i++) {
$list[$i]['subject'] = $list[$i]['title']; // 제목
$list[$i]['content'] = $list[$i]['description']; // 내용
$list[$i]['href'] = $list[$i]['link']; // 게시글 링크
$list[$i]['ori_href'] = $list[$i]['originallink']; // 원글 링크
$list[$i]['datetime'] = date("Y-m-d", strtotime($list[$i]['pubDate'])); // 날짜 형식1 (2020-01-01)
$list[$i]['datetime2'] = substr($list[$i]['datetime'],5,5); // 날짜 형식2 (01-01)
?>
<li class="<?php if ($list[$i]['is_notice']) echo "gw_notice"; ?> gw_wz_li">
<dl>
<dt class="wz_thumb"></dt>
<dd class="wz_con">
<p class="wz_con_title">
<span class="bo_cate_link">뉴스</span>
<a href="<?php echo $list[$i]['href'] ?>" target="_blank" class="wz_title"><?php echo $list[$i]['subject'] ?></a>
</p>
<div class="wz_nb_txt">
<?php echo $list[$i]['content'] ?>
</div>
<div class="wz_info">
<span class="date"><?php echo $list[$i]['datetime'] ?></span>
</div>
</dd>
</dl>
</li>
<?php } ?>
</ul>
<?php if (count($list) == 0) { echo '<div class="gw_tb_empty"><p>검색 결과가 없습니다.</p></div>'; } ?>
</div>
</div>
답변 3
.gw_wz li{display:inline-block; width:100%; padding:16px 0; border-bottom:0px solid #eef1f5; font-size:15px; vertical-align:top;}
==>
.gw_wz li{display:inline-block; width:45%; padding:16px 0; border-bottom:0px solid #eef1f5; font-size:15px; vertical-align:top;text-align:left;}
width 사이즈를 50가까이 조정해 보시고
height도 <li 높이 생각해서 지정해 줘 보세요.
두줄로 나오긴 했는데 이상하게 나오네요 ㅠ 댓글에 사진 올렸습니다..
넵 ㅎ 감사합니다.
li.gw_wz_li
이 근방 css도 보여 주세요.
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700&display=swap');
#naver_list {width:69%;background:#fff;font-family: 'Noto Sans KR', sans-serif;}
.bo_cate_link {float:left;display:inline-block;margin-right:10px;background:#e2eaf6;color:#3a8afd;font-weight:normal !important;height:20px;line-height:10px;padding:5px 8px;border-radius:5px;font-size:0.95em} /* 글제목줄 분류스타일 */
.bo_cate_link:hover {text-decoration:none}
.gw_wz{padding:0 6px 0px;}
.gw_wz ul{font-size:0; border-top:1px solid #eef1f5;}
.gw_wz li{display:inline-block; width:100%; padding:16px 0; border-bottom:0px solid #eef1f5; font-size:15px; vertical-align:top;}
.gw_wz li dl:after{content:""; display:block; clear:both;}
/* .gw_wz .wz_thumb{width:160px; height:160px; background-color:#fafafa; background-image:url('./img/icon_naver_news.svg'); */
background-repeat:no-repeat; background-size:100px auto; background-position:center; }
.gw_wz .wz_thumb, .gw_wz .wz_con{float:left;}
.gw_wz .wz_con{width:calc(100% - 160px); padding:0 16px;}
.gw_wz .wz_con b{font-weight:600;}
.gw_wz .wz_con_title{padding-top:0px;}
.gw_wz .wz_title{font-weight:600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
word-wrap: break-word; font-size:12px;}
.gw_wz .wz_nb_txt{margin:16px 0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
word-wrap: break-word; line-height:1.5em; height:3em; font-size:12px; color:#8c8d90;}
.gw_wz .wz_info{font-size:12px;}
.gw_wz .wz_nb_name{margin-right:4px; padding:2px 12px; border:1px solid #03cf5d; border-radius:12px; color:#03cf5d; font-weight:600;
-webkit-transition:all .3s; transition:all .3s;}
.gw_wz .wz_nb_name:hover{background:#03cf5d; color:#fff;}
/* 게시글이 없을 때 */
#naver_list .gw_tb_empty{width:100%; padding:60px 0; border-bottom:1px solid #eef1f5; text-align:center;}
/* 게시판의 출력 카테고리 */
#naver_list .bo_cate_link{margin-top:2px; line-height:8px; background:#fff; color:#4f46ba; font-size:13px; border-radius:10px; border:1px solid #4f46ba;}
@media screen and (max-width:1023px) {
.gw_wz li{width:100%;}
}
@media screen and (max-width:768px) {
#naver_list .bo_cate_link{margin-top:1px; font-size:12px;}
.gw_wz .wz_thumb{background-color:#f7f7f7;}
}
@media screen and (max-width:480px) {
#naver_list .bo_cate_link{padding:5px 4px;}
.gw_wz .wz_thumb {background-size:80px auto;}
.gw_wz .wz_thumb, .gw_wz .wz_con{float:none; width:100%}
.gw_wz .wz_thumb{height:80px;}
.gw_wz .wz_con{padding:0;}
.gw_wz .wz_title{font-size:13px;}
.gw_wz .wz_nb_txt{font-size:13px;}
.gw_wz .wz_info{font-size:12px;}
}
@media screen and (max-width:320px) {
#naver_list .bo_cate_link, .gw_wz .wz_info{font-size:11px;}
}
입니답..
https://tonll.co.kr 입니답..!
혹시 URL도 볼 수 있을까요?
URL을 공개하시면 더 좋은 댓글이 달릴 겁니다.
지금은 잘 나오는 거 같군요.
답변을 작성하시기 전에 로그인 해주세요.