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>

enter image description here

我用Google搜索并搜索了SO以获得答案，但我被困住了，我希望有人可以告诉我如何使用CSS正确定位div，如上所示。

我不确定如何定位div6＆amp; div3旁边的div7，div4＆amp; 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 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>

据我所知，这是你需要的结果......

移动响应是一种奖励;）

Answer 3

您可以使用Bootstrap执行此操作：

View footerView = ((LayoutInflater) ActivityContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.footer_layout, null, false);
yourListView.addFooterView(footerView);

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

css正确定位div

3 个答案: