CSS正確位置的div

Question

我有以下7個div的，我使用的CSS如下試圖位置：

<div id="id_div_wrapper"> 
    <div id="id_div1"> 
     Div 01 
    </div> 
    <div id="id_div2"> 
     Div 02 
    </div> 
    <div id="id_div3"> 
     Div 03 
    </div> 
    <div id="id_div4"> 
     Div 04 
    </div> 
    <div id="id_div5"> 
     Div 05 
    </div> 
    <div id="id_div6"> 
     Div 06 
    </div> 
    <div id="id_div7"> 
     Div 07 
    </div> 
</div> 

我用Google搜索和SO尋找答案，但我堅持我希望有人能夠向我展示如何使用CSS正確定位div，如上所示。

我不確定如何將div6 & div7放在div3旁邊，div4 & div5但位於div2下方。我一直在嘗試幾個小時，但是我對於它如何與CSS一起工作感到撓頭。

Answer 1

http://codepen.io/pacMakaveli/pen/zGxzMW

這應該讓你開始。但嘗試使用網格，像Bootstrap：http://getbootstrap.com/

除非你嘗試學習。

* { 
    box-sizing: border-box 
} 

.grid { 
    padding: 50px; 
    border: 2px solid transparent; 
} 

#id_div1, 
#id_div2, 
#id_div3, 
#id_div4, 
#id_div5 { 
    width: 100%; 
} 

#id_div1 { 
    border-color: red; 
} 

#id_div2 { 
    border-color: blue; 
} 

.aside { 
    float: left; 
    width: 30%; 
} 

#id_div3 { 
    border-color: orange; 
} 

#id_div4 { 
    border-color: orange; 
} 

#id_div5 { 
    border-color: orange; 
} 

#id_div6, 
#id_div7 { 
    width: 70%; 
    float: left; 
} 

#id_div6 { 
    border-color: black; 
} 

#id_div7 { 
    border-color: blue; 
} 

Answer 2

你可以用引導做到這一點：

.low { 
 
    height: 30px; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-bottom: 5px; 
 
} 
 
.high { 
 
    height: 45px; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-bottom: 5px; 
 
} 
 
#div1 { 
 
    background-color: pink; 
 
} 
 
#div2 { 
 
    background-color: lightgrey; 
 
} 
 
#div3 { 
 
    background-color: green; 
 
} 
 
#div4 { 
 
    background-color: lightblue; 
 
} 
 
#div5 { 
 
    background-color: brown; 
 
} 
 
#div6 { 
 
    background-color: darkgrey; 
 
} 
 
#div7 { 
 
    background-color: cadetblue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="low" id="div1">div1</div> 
 
    <div class="low" id="div2">div2</div> 
 
    <div class="row"> 
 
     <div class="col-xs-3"> 
 
      <div class="low" id="div3">div3</div> 
 
      <div class="low" id="div4">div4</div> 
 
      <div class="low" id="div5">div5</div> 
 
     </div> 
 
     <div class="col-xs-9"> 
 
      <div class="high" id="div6">div6</div> 
 
      <div class="high" id="div7">div7</div> 
 
     </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/0wq52o6q/1/

Answer 3

我會強烈建議使用Twitter的引導。這是一種全新的學習方式，一開始就讓人頭痛，但隨後你會發現它非常有用，因爲大多數（如果不是全部）CMS，LMS和電子商務模板都使用它。

至於你想要的樣式，它不會工作，因爲它的結構。 它的做法是這樣的。 （這是很粗糙的。）

<style type="text/css"> 
    *{ 
     margin: 0 auto; 
     padding: 0px; 
    } 

    .content{ 
     width: 90%; 
     display: block; 
    } 

    .full-width{ 
     display: block; 
     width: 100%; 
     min-height: 50px; 
     border-bottom: 1px solid black; 
    } 
    .col-md-4{ 
     width: 30%; 
     min-height: 50px; 
     float: left; 
     background: #004000; /*This is temporary background color*/ 
     color: #fff; /*Makes text white*/ 
     margin-right: 2%; 
    } 

    .row{ 
     border-bottom: 1px solid red; 
     padding: 20px; 
    } 

    .col-md-9{ 
     width: 68%; 
     float: left; 
     min-height: 50px; 
     background: #400000; 
     color: #fff; 
    } 

    @media (max-width:600px) and (min-width:200px) { 
     .col-md-4, .col-md-9{ 
     display: block; 
     min-height: 50px; 
     width: 100%; 
     border: 1px solid black; 
    } 
} 
</style> 

<div class="content"> 
<div class="full-width"> 
<p>Full Width 1</p> 
</div> 
<div class="full-width"> 
<p>Full Width 2</p> 
</div> 
<div class="col-md-4"> 
<div class="row"> 
This is a row.This is a row.This is a row.This is a row.This is a row. 
</div> 
<div class="row"> 
This is a row.This is a row.This is a row.This is a row.This is a row. 
</div> 
</div> 
<div class="col-md-9"> 
<div class="row"> 
This is a row.This is a row.This is a row.This is a row.This is a row. 
</div> 
<div class="row"> 
This is a row.This is a row.This is a row.This is a row.This is a row. 
</div> 
</div> 
</div> 

我的理解是這樣的結果，你需要...

移動響應是獎金;）