채택완료

박스 위치 좀 부탁드립니다

전 윈도우 화면에서 제일 큰화면일땐 제일 왼쪽에서에 몰린 박스를 중앙으로 위치하게하고싶고

화면 사이즈가 630px이하로되면 윈도우창에 박스를 딱 맞게 맞추고싶은데

style코드말고 소스 코드 ul을 감싸서

밑에처럼 하닌까 박스가 윈도우창 왼쪽에서 50%떨어져서 나오긴하는데

630px가 되어도 똑같이 윈도우창 왼쪽에서 50%가 떨어지네요...

630px이하로 될때는 100%가득 채워지게할려면 어떻게해야하나요?

.m00{position:relative; left:50%; window:100%}

<div class="m00">

<ul> ~~~~</ul>

</div>

Copy
.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;}}
Copy
<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("&nbsp;", "", 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개

채택된 답변
+20 포인트

소스에 미디어 쿼리있으시네요

@media screen and (max-width: 630px) {

.col-xs-6{width:100%}

}

 

최대630일때까지 넓이값 100프로

답변에 대한 댓글 1개

했어요 ㅋㅋ

margin-bottom: 20px
margin:0 auto
하닌까 되더라고요
감사합니다

답변을 작성하려면 로그인이 필요합니다.