css 正确定位 div

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>

我用谷歌搜索并搜索了 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

你可以用 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/

Answer 3

我强烈建议使用 Twitter bootstrap。它是新东西，一开始让人头疼，但随后您会发现它在任何地方都非常有用，因为即使不是所有 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>

据我了解，这就是您需要的结果...

移动设备的响应速度是一个加分项 ;)

css 正确定位 div

css to correctly position divs

html

css

placement