[blog] css dynamic float 3 layer

byllallallall 6/03/2021 09:26:00 오후

css 2단 동적 구성

css 템플릿으로 1단 left, right 2단, footer 3개의 레이어로 구성되어 있습니다.

🧩 html 템플릿

CSS : float 속성

  • 1단에 왼쪽과 오른쪽 레이어가 float 형태로 있습니다.
  • 중간에 clear 레이어가 있습니다. 
  • 2단에 floot 레이어가 있습니다.
<html>
<head>
    <style type="text/css">
        
        .ll_div_parent {
            border:1px solid red;
            width:100%;
            padding:5px;
            overflow:hidden;
        }
        .ll_div_left {            
            border:1px solid blue;
            width:45%;
            float:left;
            position:relative;
            padding:3px;
        }
        .ll_div_right {            
            border:1px solid green;
            width:45%;
            float:right;
            position: relative;
            padding:3px;
            text-align:right;
        }

        .ll_div_clr { clear:both; }       
        .ll_div_footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="ll_div_parent">
        <div class="ll_div_left">float left div here title</div>
        <div class="ll_div_right">
            float right div pic here<br />
            dynamic row<br />
        </div>
        <div class="ll_div_clr"></div>
        <div class="ll_div_footer">content here</div>
    </div>
</body>
</html>


참고 자료

https://pythonq.com/so/css/350433

Tags

댓글 쓰기

0 댓글

피드 구독하기: 댓글 (Atom)
Crafted with by TemplatesYard | Distributed by Gooyaabi Themes