CSS 관련 문의

CSS 관련 문의

QA

CSS 관련 문의

답변 3

본문

 

2105789910_1619608641.2261.png

 

위 사진의 첫 그림을 두번째 그림처럼 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;}
}
 


입니답..

 

thumb-2105789910_1619611074.3542_730x687.png

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 109
© SIRSOFT
현재 페이지 제일 처음으로