css - 我怎样才能定位这个div？

Question

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

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

和中间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为此。尝试position: relative为 div3 和 div4 做。

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

Answer 3

您无法从给定的 CSS 状态中为 Div 实现您想要的。无论您做什么，都必须修改指定的 CSS 才能实现。

有两种可能的方法可以解决它

1. 将三个 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>
   

2. 制作你的 divposition:absolute

看到这个小提琴的第一个解决方案

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