css 탭메뉴를 만드는중입니다...
본문
저 회색을 빨간색 오른쪽에 배치를 하고 싶은데 안되요 ㅠㅠ
<html>
<div class="sn">
<h1>첩살이</h1>
<h4>첩살이 밥상</h4>
<h6>css 탭 메뉴 만들기</h6>
<input type="radio" id="tab1" name="ta" checked="checked">
<label for="tab1" class="label_radio">첩살 1</label>
<input type="radio" id="tab2" name="ta">
<label for="tab2" class="label_radio">첩살 2</label>
<input type="radio" id="tab3" name="ta">
<label for="tab3" class="label_radio">첩살 3</label>
<div id="con1"> <h1>첩살</h1> </div>
<div id="con2"> <h1>첩살이</h1> </div>
<div id="con3"> <h1>첩살이랑</h1> </div>
css
.sn {
width: 600px;
margin:0 auto;
height: 400px;
background: #d04629;
position: relative;
}
.sn label{
display: block;
}
.sn > div {
width: 300px;
height: 400px;
background: #ddd;
display: none;
}
#tab1:checked ~ #con1,
#tab2:checked ~ #con2,
#tab3:checked ~ #con3 {
display: block;
}
답변 1
대충 짜 볼게요
이렇게 구현을 원하는게 맞나 싶지만
<style>
.sn_wrap { width:1200px; height:500px; margin:0 auto; }
.sn1 { width:200px; height:100%; float:left; background:red; }
.sn2 { width:200px; height:100%; float:left; background:gray; }
.sn3 { width:200px; height:100%; float:left; background:green; }
</style>
<div class="sn_wrap">
<div class="sn1">
</div>
<div class="sn2">
</div>
<div class="sn3">
</div>
</div>
요런식의 레이아웃을 원하는게 맞아요??
감사합니다^^
