반응형관련 질문 좀
본문
밑에 처럼 세로로는 반응형이 되는데 저는 4개박스가 가로로 있다가 줄어들면 박스가 한개식 내려 가게 반응형을 짜고 싶은 제 한계인듯해서 올려봅니다
부탁드려요ㅠㅠ.
#m00{width: 100%}
.vbar {
width: 100%;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
margin: 0 auto;
}
.vbar li{
width: 100%;
display: table-cell;
margin:0 auto;
vertical-align: middle;
}
.vbar a {display:inline-block;}
.vbar li img{
width: 100%;
}
@media screen and (min-width: 480px) {
.vbar {width:400px; height:200px;}
.vbar li {width:400px; height:200px;}
}
<div id="m00">
<div class="vbar">
<a href="../hospita_list/hospita_list.php"\>
<li><img src="../image/hospital.jpg"/></li>
</div>
<div class="vbar">
<a href="../sightseeing_list/sightseeing_list.php"/>
<li><img src="../image/sightseeing.jpg"/></li>
</div>
<div class="vbar">
<a href="../stay_home_list/stay_home_list.php"/>
<li><img src="../image/stay_home.jpg"/></li>
</div>
<div class="vbar">
<a href="../board/bbs/board.php?bo_table=order"/>
<li><img src="../image/register.jpg"/></li>
</div>
답변 2
li 바깥에 ul이나 ol 등 태그가 안 뵈네요.
원하시는 기능은 li 부분에 float:left 넣으시면 되는데...
아래 구조로 짠 후,
div ul 부분은 100% 형식으로 너비 주고,
li 부분에 적당히 너비 주고 float:left 속성 넣어보세요.
<div>
<ul>
<li><a>
<img>
</a>
</li>
<li><a>
<img>
</a>
</li>
</ul>
</div>
이렇게요? 이렇게 짜닌가 그냥 박스와 박스 사이만 넓어지고 왼쪽으로 치우쳐지기만하고 가로로 가진않는데요...
#m00{width: 100%}
.vbar {
width: 100%;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
margin: 0 auto;
}
.vbar ul{width: 100%;}
.vbar li{
width: 100%;
display: table-cell;
margin:0 auto;
vertical-align: middle;
float: left;
}
.vbar a {display:inline-block;}
.vbar li img{
width: 100%;
}
@media screen and (min-width: 480px) {
.vbar {width:400px; height:200px;}
.vbar li {width:400px; height:200px;}
.vbar li {width:350px; height:200px;}
.vbar li {width:300px; height:200px;}
}
.m01{
width: 100%;
height: 50px;
margin:1.5px 0px 1.5px 0px;
float:right;
font-size: 16px;
padding: 0 0px 0px 0px;
font-family: sans-serif;
background-color:white;
}
</style>
<div id="m00">
<div class="vbar">
<ul>
<li><a href="../hospita_list/hospita_list.php">
<img src="../image/hospital.jpg"></a></li>
<li><a href="../sightseeing_list/sightseeing_list.php">
<img src="../image/sightseeing.jpg"></a></li>
<li> <a href="../stay_home_list/stay_home_list.php">
<img src="../image/stay_home.jpg"></a></li>
<li> <a href="http://timeplace.co.kr/board/bbs/board.php?bo_table=order">
<img src="../image/register.jpg"></a></li>
</ul>
</div>
</div>
아래 코드 참고해 작업해 보세요.
http://codepen.io/sinbi/pen/GjPEgV
오 멋지십니다^^ 감사합니다 참고해서 해볼께요
bootstrap 으로 가로폭에 따라 4개 2개 이렇게 배치하는 것도 편해요
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
</div>
</div>
