전 윈도우 화면에서 제일 큰화면일땐 제일 왼쪽에서에 몰린 박스를 중앙으로 위치하게하고싶고
화면 사이즈가 630px이하로되면 윈도우창에 박스를 딱 맞게 맞추고싶은데
style코드말고 소스 코드 ul을 감싸서
밑에처럼 하닌까 박스가 윈도우창 왼쪽에서 50%떨어져서 나오긴하는데
630px가 되어도 똑같이 윈도우창 왼쪽에서 50%가 떨어지네요...
630px이하로 될때는 100%가득 채워지게할려면 어떻게해야하나요?
.m00{position:relative; left:50%; window:100%}
<div class="m00">
<ul> ~~~~</ul>
</div>
.fz_gallery_list{ display: inline; text-transform: uppercase; font-size: 11px; width:auto !important; padding: 0 5px; letter-spacing: 2px; }.fz_gallery_list{width: 100%;} .fz_gallery_list * {Margin:0; padding:0;} .fz_gallery_list .col-xs-6{ width:60%; border:1px solid silver; box-sizing:border-box; } @media screen and (max-width: 830px) { .fz_gallery_list .col-xs-6{width:60% !important;}} @media screen and (max-width: 630px) { .fz_gallery_list .col-xs-6{width:100% !important;}}@media screen and (max-width:420px) { .fz_gallery_list .col-xs-6{width:100% !important;}}
<ul class="fz_gallery_list row"> <?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']); if($list[$i]['icon_secret']) $list[$i]['article_type'] = "<span class='icon_pack2 icon_secret2'>비밀글</span>"; else if($list[$i]['icon_file']) $list[$i]['article_type'] = "<span class='icon_pack2 icon_file2'>파일첨부</span>"; else $list[$i]['article_type'] = "<span class='icon_pack2 icon_txt2'>텍스트</span>"; if($list[$i]['icon_link']) $list[$i]['icon_pack'] .= "<span class='icon_pack icon_link'>링크</span>"; if($list[$i]['icon_new']) $list[$i]['icon_pack'] .= "<span class='icon_pack icon_new'>새글</span>"; if($list[$i]['wr_reply']) $list[$i]['icon_reply'] = "<span class='icon_pack2 icon_reply'>답변</span>"; if($thumb['src']) { $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'">'; } else { $img_content = '<i class="fa fa-picture-o"></i>'; } ?> <a href="<?php echo $list[$i]['href'] ?>"> <?php if ($list[$i]['is_notice']) { // 공지사항 ?> <strong style="width:<?php echo $thumb_width ?>px;height:45px">공지</strong> <?php } else { $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $thumb_width, $thumb_height); // 썸네일 크기를 위에서 선언한 크기사용 // 유튜브, 비메오 썸네일 추출 if(!$thumb){ // 썸네일이 없는 경우 if($list[$i]['wr_1']) { // 유튜브 이미지 출력 $thumb['src'] = "http://img.youtube.com/vi/{$list[$i][wr_1]}/default.jpg"; } elseif ($list[$i]['wr_2']){ // 비메오 이미지 출력 $output=get_vimeo("http://vimeo.com/api/v2/video/".$list[$i]['wr_2'].".php"); $output=unserialize($output); // echo "<img src='".$output[0][thumbnail_medium]."'>"; //thumbnail_small, thumbnail_medium, thumbnail_large $thumb['src'] = $output[0][thumbnail_medium]; } } // 유튜브, 비메오 썸네일 추출 end if($thumb['src']) { $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$thumb_width.'" height="'.$thumb_height.'">'; } } ?> </a> <li class="col-sm-4 col-xs-6<?=$wr_id == $list[$i]['wr_id'] ? " active" : ''?>"> <a href='<?php echo $list[$i]['href'];?>' class="fz_gallery_li_wrap"> <span class="fz_gallery_user"> <i class="fa fa-user"></i><?php echo $list[$i]['name'] ?> <?php if ($is_checkbox) { ?> <label for="chk_wr_id_<?php echo $i ?>" class="sound_only"><?php echo $list[$i]['subject'] ?></label> <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="fz_admin_chk"> <?php } ?> </span> <span class="fz_gallery_etc"> <span class="fz_gallery_etc_info"><i class="fa fa-eye"></i> <?php echo $list[$i]['wr_hit'] ?></span> <span class="fz_gallery_etc_info"><i class="fa fa-comments"></i> <?php echo $list[$i]['comment_cnt'] ? $list[$i]['comment_cnt'] : '0';?></span> <?php if ($is_good) { ?><span class="fz_gallery_etc_info"><i class="fa fa-thumbs-o-up"></i> <?php echo $list[$i]['wr_good'] ?></span><?php }?> <?php if ($is_nogood) { ?><span class="fz_gallery_etc_info"><i class="fa fa-thumbs-o-down"></i> <?php echo $list[$i]['wr_nogood'] ?></span><?php }?> <span class="fz_gallery_date"><i class="fa fa-calendar-check-o"></i> <?php echo $list[$i]['datetime2'] ?></span> </span> <span class="fz_gallery_thumb"><?php echo $img_content;?></span><!--이미지출력--> <span class="fz_gallery_title"> <?php echo $list[$i]['icon_reply']; echo $list[$i]['article_type']; if ($is_category && $list[$i]['ca_name']) {echo "<span class=\"bo_cate_link\">[{$list[$i]['ca_name']}]</span>";} echo $list[$i]['subject']; echo $list[$i]['icon_pack']; ?> </span> <?php if($board['bo_use_list_content']){?> <span class="fz_gallery_content"><?=cut_str(str_replace(" ", "", trim(strip_tags($list[$i]['wr_content']))), 80)?></span> <?php }?> </a> </li> <?php } ?> <?php if (count($list) == 0) { echo '<div class="fz_empty_list">게시물이 없습니다.</div>'; } ?> </ul>
답변 1개 / 댓글 1개
소스에 미디어 쿼리있으시네요
@media screen and (max-width: 630px) {
.col-xs-6{width:100%}
}
최대630일때까지 넓이값 100프로
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.
margin-bottom: 20px
margin:0 auto
하닌까 되더라고요
감사합니다