1

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

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

代码截图

我希望第 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;
    }
4

4 回答 4

2

只需使用通用 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;
    }

演示在这里

于 2013-03-29T22:36:00.467 回答
1

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

您可能还必须指定.left_sideand的宽度.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;
}
于 2013-03-29T22:40:31.610 回答
1

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

<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并将它们分配给#rightand #left：

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

最后，您需要考虑正确的宽度。你#container有 440px 的空间。每个孩子div被分配218px；但是，这些divs 中的每一个在每边也有一个 1px 的边框，这使得它们占据了 218 + 2(1) = 220px 的空间。#imgbox将和的宽度减小.pick到 216px。

一切都可以在这个 jsFiddle 上看到。

于 2013-03-29T22:47:19.267 回答
0

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

<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;
 }
于 2013-03-29T22:45:33.087 回答