CSS正確地定位股利

Question

我嘗試使用CSS定位以下7個div，如下所示：

<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>

我已經用谷歌搜索並搜索了答案，但是我被困住了，希望有人可以向我展示如何使用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

我強烈建議使用Twitter引導程序。 這是一門新知識，一開始讓人頭疼，但是隨后您會發現它非常有用，因為大多數（如果不是全部）CMS，LMS和電子商務模板都使用它。

至於您要設置樣式的html，因為它的結構，所以無法使用。 它的完成方式是這樣的。 （非常粗糙。）

<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>

據我了解，這是您需要的結果...

移動響應能力是一個獎勵；）

Answer 3

您可以使用Bootstrap來做到這一點：

 .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/