플로팅 div 위치 지정

Question

5 개 div를 배치하려고합니다.

이 div의 왼쪽에 부유하는, 권리 문제는이 권리 사업부가 나는 시도하고 할 경우에도, 중간 DIV 아래에 붙어 있다는 것입니다

부동 1 중간 div의 이 div의 누적 중간 div 작게.

내 센터 div가 아닌 오른쪽에 오른쪽 부동 div를 어떻게 넣을 까?

Answer 1

<div class="wrap"> 
    <div class="col-l"> 
    <div>your 1st div</div> 
    <div>your 2nd div</div> 
    </div> 
    <div class="col-m">your 3rd div</div> 
    <div class="col-r"> 
    <div>your 4th left div</div> 
    <div>your 5th left div</div> 
    </div> 
</div> 
<style> 
.wrap { width: 900px; clear: both; overflow: hidden; } 
.col-l { width:　300px; float: left; } 
.col-m { width: 200px; float: left; } 
.col-r { width: 400px; float: right; } 
</style> 

Answer 2

원하는 종류입니까?

HTML :

<div class="container"> 
    <div class="box left"></div> 
    <div class="box left"></div> 

    <div class="box middle"></div> 

    <div class="box right"></div> 
    <div class="box right"></div> 
</div> 

CSS :

.container { 
    text-align: center; 
} 

.box { 
    border: 1px solid black; 
    height: 100px; 
    width: 100px; 
} 

.left { 
    float:left; 
} 

.middle { 
    display: inline-block; 
} 

.right { 
    float: right; 
} 

Here's a fiddle.

Answer 3

.topLeft { 고도 : 310px;

     width: 200px; 

        float: left; 

     margin-bottom:50px; 

      } 
    .nextLeft { 
        height: 700px; 

        width: 200px; 

     clear: both; 

        float: left; 
      } 



    .middle{ 

    margin:0 230px; 

    width:700px; 





    } 
      .topRight { 

        height: 200px; 

        width: 200px; 

        float: right; 


        } 
      .nextRight { 
        height:200px; 

        width: 200px; 

     border-radius: 1em 2em;       
        float: right; 

     clear: both; 


      }