Question

我创建了一个父div，里面有四个div。第一个div（灰色）包含一个图像，第二个（红色）在此div下面有描述。另外两个div正在浮动这两个。

这是我能得到的最接近的：

code screenshot

我希望第3 /第4个div成为同花顺。我可以使用负的上边距，但我希望它自然上升。另外，我不能重新排列div的顺序。这是一个基本的问题/误解，但我不能给谷歌明确的定义。

这是我的HTML：

<div id="container">

<div class="imgbox"></div>

<div class="pick" id="first"></div>

<div class="pick" id="second"></div>

<div class="pick" id="third"></div>

</div>

这是CSS：

#container {
        width: 440px;
        height: 212px;
        border: 1px solid grey;
    }

    div {
        border: 1px solid black;
        display: block;
    }

    .imgbox {
        width: 218px;
        height: 100px;
        float: left;
        clear: none;
        background-color: grey;
    }

    .pick {
        width: 218px;
        height: 100px;
    }

    .pick#first {
        float: left;
        clear: left;
        background-color: red;
    }

    .pick#second {
        float: left;
        background-color: blue;
    }

    .pick#third {
        float: right;
        clear: right;
        background-color: purple;
    }

Answer 1

只需将两边包裹在一个带有常见CSS的div中。

HTML：

<div id="container">

<div class="l">
<div class="imgbox">0</div>
<div class="pick" id="first">1</div>
</div>

<div class="l">
<div class="pick" id="second">2</div>
<div class="pick" id="third">3</div> 
</div>

</div>

-

CSS：

#container {
        width: 440px;
        height: 212px;
        border: 1px solid grey;
    }

    div {
        border: 1px solid black;
        display: block;
    }

.l { width: 218px; float: left; }

    .imgbox {
        width: 218px;
        height: 100px;
        background-color: grey;
    }

    .pick {
        width: 218px;
        height: 100px;
    }

    .pick#first {
        background-color: red;
    }

    .pick#second {
        background-color: blue;
    }

    .pick#third {
        background-color: purple;
    }

Demo here

Answer 2

将左侧的所有DIV放入容器div并将其浮动到左侧。然后将所有右侧DIV放入容器中并将其向右浮动。

您可能还必须指定.left_side和.right_side的宽度。

HTML：

<div id="container">
 <div class="left_side">
  <div class="imgbox"></div>
  <div class="pick" id="first"></div>
 </div>

 <div class="right_side">
  <div class="pick" id="second"></div>
  <div class="pick" id="third"></div>
 </div>
</div>

CSS：

#container {
    width: 440px;
    height: 212px;
    border: 1px solid grey;
 }

div {
    border: 1px solid black;
    display: block;
}

.left_side {
    float:left;
}

.right_side {
    float:right;
}

.imgbox {
    width: 218px;
    height: 100px;
    float: left;
    clear: left;
    background-color: grey;
}

.pick {
    width: 218px;
    height: 100px;
}

.pick#first {
    float: left;
    clear: both;
    background-color: red;
}

.pick#second {
    float: left;
    background-color: blue;
}

.pick#third {
    float: right;
    clear: right;
    background-color: purple;
}

Answer 3

首先，您需要将左侧所需的div包装到一个容器中，将右侧的div包装在另一个容器中：

<div id="container">
    <div id="left">
        <div class="imgbox"></div>
        <div class="pick" id="first"></div>
    </div>
    <div id="right">
        <div class="pick" id="second"></div>
        <div class="pick" id="third"></div>
    </div>
</div>

然后，您可以从每个float中移除单个div作业，并将其分配给#right和#left：

#left {
    float: left;
}
#right {
    float: right;
}

最后，您需要考虑正确的宽度。您的#container有440px的空间。每个孩子div被分配218px;但是，每个div的每一边都有一个1px边框，这使得它们占用218 + 2（1）= 220px的空间。将#imgbox和.pick的宽度减小到216px。

可以在this jsFiddle.

看到所有内容

Answer 4

创建两个子容器并浮动它们。

<div id="container">
  <div class="sub-container">
    <div class="imgbox"></div>
    <div class="pick" id="first"></div>
  </div>
  <div class="sub-container">
    <div class="pick" id="second"></div>
    <div class="pick" id="third"></div>
  </div>
</div>



.sub-container{
  margin: 0;
  padding:0;
  display: inline-block;
  float: left;
 }

我怎样才能让一个子div在它之前浮动并且在'之上'的div之前？

4 个答案: