SIR
목록으로
이전글 다음글

css 탭메뉴를 만드는중입니다... 채택완료

AAro컴퍼니
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 2,264
답변 1
목록

1938521773_1630375492.8604.png

저 회색을 빨간색 오른쪽에 배치를 하고 싶은데 안되요 ㅠㅠ

<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;
}
 

#그누보드5 #css

답변 1개

채택된 답변
+20 포인트

대충 짜 볼게요

이렇게 구현을 원하는게 맞나 싶지만

Copy 
<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>

요런식의 레이아웃을 원하는게 맞아요??

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다^^

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

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

로그인
🐛 버그신고