- 엘리먼트 분할하기

 

//------------------

* flex 사용 <=== 추천

<div  style="display: flex; height: 100px;">

        <div style="width: 50%; background: green;">

            Left Div

        </div>

        <div style="flex-grow: 1; background: blue;">

            Right Div

        </div>

    </div>




//------------------

* float 사용

<div style="width: 100%;">

        <div style="width: 50%;  float: left;  height: 100px;background: green;"> 

            Left Div 

        </div>

        <div style="margin-left: 50%; height: 100px; background: blue;"> 

            Right Div

        </div>

    </div>



//-------------------

* display: table 사용

<div style="width: 100%; display: table;">

        <div style="display: table-row; height: 100px;">

            <div style="width: 50%; display: table-cell; background: green;">

                Left Div 

            </div>

            <div style="display: table-cell; background: blue;"> 

                Right Div

            </div>

        </div>

    </div>




//-----------------

// 참고

How to make side by side divs in HTML

https://www.educative.io/edpresso/how-to-make-side-by-side-divs-in-html



반응형
Posted by codens codens

댓글을 달아 주세요