반응형관련 질문 좀 채택완료
밑에 처럼 세로로는 반응형이 되는데 저는 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>
http://kinimage.naver.net/20161021_26/14770236797016FMLT_JPEG/412.jpg?type=w620">
답변 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>
답변에 대한 댓글 3개
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>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
#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>