[모바일] 게시물 목록 중 제목, 작성자, 날짜 등을 같은 행에 표시 채택완료
그누보드 모바일 기본게시판(basic)을 약간 수정하여 사용하려 합니다.
(수정 중인 파일 : /theme/basic/mobile/skin/board/basic/list.skin.php 및 style.css)
모바일 게시판 보기(게시물 목록) 중에서 제목과 작성자,작성일... (bo_info) 정보를 같은 행에 표시하고자 합니다.(css 내용 너무 어렵네요)
게시물 제목은 현재처럼 표시되고, 작성자와 날짜는 같은 행의 우측정렬해서 보여주고 싶습니다.
아래는 list.skin.php와 style.css 코드 중 해당하는 것으로 생각(제 지식수준으로)되는 부분만 적었습니다.
전체 다 적으면 너무 길어질것 같아서요. 혹시 다른 부분을 수정해야 하면, 그누보드 원본파일 중 위에 적은 경로에 있는 파일을 보시고 알려주셔도 됩니다.
보시고, 어느 부분을 수정해야 원하는 결과(2.목표) 대로 표시될까요?
1. 현재
2. 목표
파일명 : list.skin.php
1 :
2 :
3 :
4 :
5 :
6 : 카테고리
7 :
8 :
9 :
10 :
11 :
12 :
13 :
14 :
15 :
16 :
17 :
18 :
19 : 현재 페이지 게시물 전체선택
20 :
21 :
22 :
23 :
24 :
25 :
26 :
33 :
34 :
35 :
36 :
37 :
38 :
39 :
40 : 공지
41 :
42 :
43 :
44 :
45 :
46 :
47 :
49 :
50 :
51 :
58 :
59 :
60 :
61 : 댓글
62 :
63 : 개
64 :
65 :
66 :
67 :
68 :
69 : 작성자
70 :
71 : 회
72 : 추천
73 : 비추천
74 :
75 :
76 :
77 :
78 :
79 :
80 :
파일명 : style.css 중 일부
1 : /* 게시판 목록 공통 */
2 : #bo_list {}
3 : #bo_list li {background:#fff}
4 : #bo_list li.bo_notice {background:#fff6fa}
5 :
6 : .bo_fx {margin-bottom:5px;padding:0 10px}
7 : .bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
8 : .bo_fx ul {margin:0;padding:0;list-style:none}
9 : #bo_list_total {margin:10px;text-align:center;padding:10px;text-align:center;background:#e3e7ec;color:#8b8b8b;border-radius:3px}
10 :
11 : .bo_cmt {background:#e9eff5;color:#3a8afd;font-size:0.925em;height:16px;padding:0 5px;border-radius:2px;vertical-align:top;min-width:16px}
12 :
13 : .bo_subject {display:block;width:100%;padding-bottom:5px}
14 :
15 : .bo_current {color:#e8180c}
16 :
17 : .bo_info:after {visibility:hidden;clear:both;content:""}
18 : .bo_info {position:relative;padding-top:5px;line-height:20px;color:#646464;vertical-align:top}
19 : .bo_info i {margin-left:10px}
20 : .bo_info .comment_icon {background:url(./img/icon_comment.png) no-repeat 50% 50%;display:inline-block;width:20px;height:28px;text-indent:-999px;overflow:hidden;vertical-align:top;background-size:70%;margin:0 0px 0 5px}
21 : .bo_info .bo_date {}
22 : .bo_info .cnt_cmt {display:inline-block;margin: 0 5px 0 3px}답변 2개
댓글
개
css
/* 제목 + 작성자/날짜 같은 줄 배치 */
.bo_cnt_row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* 모바일 대응 */
padding: 5px 0;
}
.bo_cnt_row .bo_subject {
flex: 1 1 auto;
padding-bottom: 0; /* 기존 여백 제거 */
margin-right: 10px;
}
.bo_cnt_row .bo_meta {
white-space: nowrap;
font-size: 0.9em;
color: #888;
display: flex;
gap: 10px;
align-items: center;
}
해당 부분 참고하셔서 적용해 보세요
댓글을 작성하려면 로그인이 필요합니다.
관심과 친절에 감사드립니다.
알려주신 내용 중에 아래와 같이 변경(wrap → nowrap)하니 잘 작동되네요.
암튼 다시한번 감사드립니다.
.bo_cnt_row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
flex-wrap: wrap; → nowrap
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인