현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

CSS 관련하여 질문 하나 드립니다.

haeoun의 이미지
글쓴이: haeoun / 작성시간: 월, 2016/01/25 - 6:20오후

큰

    폼안에서
  • 를 3개넣는데
    그 각각의
  • 는
    다시 가로로 배열된
  • 2개를 가진
      이 한번더 들어있습니다.
      이렇게 해서 3행 2열 의 레이아웃이 생겨야 하는데
      제가 float에 대한 확실한 개념이 없어서 그런지 뒤죽 박죽이네요.

      물론 div로 하면 벌써 해냇지만
      이렇게 ul과 li로만 되어있는 형식에서 구현해야합니다.
      display:inline도 사용하지 않고요.
      어떻게 구현해야할지 도움좀 부탁드려요~!!


      <head>
    <meta charset="utf-8">
    <style type="text/css">
        #ool{
            border: 1px solid red;
        }
        .inner {
            border: 1px solid blue;
        }                
        .inner li{
            float: left;
        }
        .inner li:nth-child(odd){
 
        }
        .inner li:nth-child(even){
            margin-left: 50px;
        }        
    </style>
 
</head>
<body>
    <div>
        <ul id='ool'>
            <li>
                <ul class="inner">
                    <li>1-1</li>
                    <li>1-2</li>
                </ul>
            </li>
            <li>
                <ul class="inner">
                    <li>2-1</li>
                    <li>2-2</li>
                </ul>
            </li>
            <li>
                <ul class="inner">
                    <li>3-1</li>
                    <li>3-2</li>
                </ul>
            </li>        
        </ul>    
    </div>
</body>

      -->

Forums: 
프로그래밍 QnA
shint의 이미지

글쓴이: shint / 작성시간: 월, 2016/01/25 - 8:16오후

다음 블로그 웹 에디터에 해당 HTML 을 복사한 소스를 본 내용

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Pseudo Class - :nth-child</title>
 
  </head>
  <body>
 
 
<p><br>
</p><ul id="ool"><br>
<li><br>
<ul class="inner"><br>
<li>1-1<br>
</li><li>1-2<br></li></ul><br><br>
</li><li><br>
<ul class="inner"><br>
<li>2-1<br>
</li><li>2-2<br></li></ul><br><br>
</li><li><br>
<ul class="inner"><br>
<li>3-1<br>
</li><li>3-2<br></li></ul><br></li></ul><p><br></p>
 
  </body>
</html>

style 을 추가한 경우의 코드

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Pseudo Class - :nth-child</title>
 
<style>
#ool{
border: 1px solid red;
}
.inner {
border: 1px solid blue;
} 
.inner li{
float: left;
}
.inner li:nth-child(odd){
 
}
.inner li:nth-child(even){
margin-left: 50px;
} 
</style>
 
 
  </head>
  <body>
 
 
<p><br>
</p><ul id="ool"><br>
<li><br>
<ul class="inner"><br>
<li>1-1<br>
</li><li>1-2<br></li></ul><br><br>
</li><li><br>
<ul class="inner"><br>
<li>2-1<br>
</li><li>2-2<br></li></ul><br><br>
</li><li><br>
<ul class="inner"><br>
<li>3-1<br>
</li><li>3-2<br></li></ul><br></li></ul><p><br></p>
 
  </body>
</html>

----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.

매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

둘러보기