박스 위치 좀 부탁드립니다
본문
전 윈도우 화면에서 제일 큰화면일땐 제일 왼쪽에서에 몰린 박스를 중앙으로 위치하게하고싶고
화면 사이즈가 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
소스에 미디어 쿼리있으시네요
@media screen and (max-width: 630px) {
.col-xs-6{width:100%}
}
최대630일때까지 넓이값 100프로
했어요 ㅋㅋ
margin-bottom: 20px
margin:0 auto
하닌까 되더라고요
감사합니다
답변을 작성하시기 전에 로그인 해주세요.
