Question

我有5个div，其中4个得到了：

4divs{width:150px; height:100px; float:left;}

和mid div：

midDiv{width:200px; height:200px; float:left;}

和容器：

container{width:500px; height:200px;}

我想要的是：

Answer 1

给你的#container{position:relative;}而不是你的每个div给出绝对定位：

div:nth-child(1){position:absolute; top:0; left:0;}
div:nth-child(2){position:absolute; top:100px; left:0;}
div:nth-child(3){position:absolute; top:0; left:100px;}
div:nth-child(4){position:absolute; top:0; right:0;}
div:nth-child(5){position:absolute; top:100px; right:0;}

Answer 2

假设名称：div1，div2，div3，div4和div-mid。尝试这样安排...

<container>

<div1> </div1>

<div-mid> </div-mid>

<div2> </div2>

<div3> </div3>

<div4> </div4>

</container>

然后你会

将div3置于容器中的最左侧。

将容器中的div4置于极右。

然后将它们放在容器底部的中。

尝试float: left和float : right。尝试为div3和div4执行position: relative。

如果你没有，请获取Firebug： https://getfirebug.com/

Answer 3

你无法从Div的CSS的给定状态中获得你想要的东西。无论你做什么，你都必须修改指定的CSS才能实现这一点。

有两种方法可以解决这个问题

将三个div向左浮动或以内联方式显示，即在水平线上彼此相邻。然后将左右div分成两部分，即。

 <div class="container">
   <div class="left">
      <div class="upper"> 
      </div>
      <div class="lower"> 
      </div>
  </div>
  <div class="middle">
  </div>
  <div class="right">
     <div class="upper"> 
     </div>
     <div class="lower"> 
     </div>
 </div>

制作你的div position:absolute

请参阅此fiddle for 1st solution

Answer 4

在给定当前的html结构的情况下，您将无法使用css创建该布局。

你真的需要有以下html结构，这意味着一个容器有三个浮动dics，里面有你自己的块。

<div class="container">

    <div class="container-2">
        <div class="div1">
        </div>
        <div class="div1">
        </div>
    </div>

    <div class="container-2">
        <div class="div2"></div>
    </div>

    <div class="container-2">
        <div class="div1">
        </div>
        <div class="div1">
        </div>
    </div>

</div><!-- / .container -->


.container {
    overflow: hidden;
}

.container-2 {
    float: left;
    margin-right: 10px;
    display: inline-block;
}

.div1 {
    width: 150px;
    height: 100px;
    margin-bottom: 10px;
}

.div2 {
    width: 150px;
    height: 210px;
    margin-bottom: 10px;
}

.container-2 .div1:last-child {
    margin-bottom: 0;
}

我怎么能定位这个div？

4 个答案: