명확한 문제가있는 CSS 플로트 레이아웃

Question

저는 CSS에 완전히 익숙하지 않으며, 뭐라 할지라도 혼란스럽고, 플로트 나 위치 등으로 좌절하는 경우가 많습니다. 최선을 다해 설명해 보겠습니다.

DIV1     DIV2 
DIV3 DIV4  

DIV5 DIV6 DIV7 DIV8 
DIV9     
        DIV10 

그래서 내가 원하는 레이아웃입니다. 내 시행 착오는 엉망이 됐어. 내가 가진 Div1 : 부동 : 왼쪽, div2 : 부동 : 왼쪽 div3 : 분명히. 모든 것은 그 시점까지 작동합니다. div4가 div3 옆에 가고 5,6,7,8을 선택하여 3과 4를 지우고 서로 옆에 놓기를 원합니다. 의견이 있으십니까? 나는 그것으로 지옥을 말할 것이고, 모든 것에 고정 된 자세를 취할 것이다. 그러나 그것은 위치를 이해하려고 노력하는 것을 초조하게하고있다.

여기 내 코드에 추가했습니다. 이것은 혼란스럽고 주변에서 놀았습니다. 난 그냥 일을 맞게 만들려고 장난, 그들을 필요로하지 때문에 높이와 너비 변수가

<style> 

#div-1 
{ 
    float:left; 
    width:390px; 
    height: 170px; 

} 
#div-2 
{ 
    float:right; 
    text-align:right; 
    width:450px; 
} 
#div-3 
{ 
    width:80px; 
    height:60px; 
    clear:left; 
    text-align:left; 
} 
#div-4 
{ 
    border:dashed 2px; 
    float:left; 
} 
#div-5 
{ 
    float:left; 
    top:350px; 
} 
</style> 

Answer 1

여기 그리드가 배치되어 있습니다. 내가 플로트/클리어를 추가 한 곳을 볼 수 있습니다 : http://codepen.io/mastastealth/pen/xyeli

는 HTML :

는

<div class="main"> 
    <div class="left">1</div> 
    <div class="right">2</div> 

    <div class="left clear-left">3</div> 
    <div class="left">4</div> 

    <div class="left clear-left">5</div> 
    <div class="left">6</div> 
    <div class="left">7</div> 
    <div class="left">8</div> 

    <div class="left">9</div> 
    <div class="right clear-left">10</div> 
</div> 

CSS : 당신이 도움을 원한다면 당신은 정말 코드 샘플을 제공해야

.main { width: 800px; } 

.main div { 
    background: #abc123; text-align: center; 
    line-height: 50px; width: 200px; 
    box-shadow: inset 0 0 1px #000; 
    margin-bottom: 10px; 
} 

div.left { float: left; } 
div.right { float: right; } 

div.clear-left { clear: left; } 

Answer 2

데모 : http://jsfiddle.net/iambriansreed/uGRWY/

HTML :

<div class="wrap"> 
    <div class="DIV1">DIV1</div> 
    <div class="DIV2">DIV2</div> 
    <div class="DIV3">DIV3</div> 
    <div class="DIV4">DIV4</div> 
    <div class="DIV5">DIV5</div> 
    <div class="DIV6">DIV6</div> 
    <div class="DIV7">DIV7</div> 
    <div class="DIV8">DIV8</div> 
    <div class="DIV9">DIV9</div> 
    <div class="DIV10">DIV10</div> 
</div> 
<pre> 
DIV1     DIV2 
DIV3 DIV4 
DIV5 DIV6 DIV7 DIV8 
DIV9     
        DIV10 
</pre> 

CSS :

.wrap { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    background: #eee; 
} 
.wrap > div { 
    position: relative; 
    float: left; 
    clear: none; 
    background: #ccc; 
    width: 25%; 
} 
.wrap > div.DIV1, 
.wrap > div.DIV4 {  
    width: 75%; 
} 
.wrap > div.DIV9 {  
    width: 100%; 
} 
.wrap > div.DIV10 { 
    float: right; 
}