html - 如何让一排div与一些在彼此之上

Question

我正在尝试创建一组如下图所示的 div。我可以让它们都紧挨着，但我不能让小的一个在另一个上面。除非我为他们制作一个父 div，我更愿意看看是否有更好的方法。

Image

这是代码:Fiddle

div.boxes{
  width:450px;
  height:100px;
  border:1px solid #fff;
  background:#000;
  float:left;
}
div.boxes > div{
  background:#bf00bd;
  border:1px solid #999;
}
div.boxes > div.item1{
  width:50px;
  height:50px;
  float:left;
}
div.boxes > div.item2{
  width:100px;
  height:20px;
  float:left;
}
div.boxes > div.item3{
  width:100px;
  height:20px;
  float:left;
}
div.boxes > div.item4{
  width:50px;
  height:50px;
  float:right;
}
div.boxes > div.item5{
  width:50px;
  height:50px;
  float:right;
}
div.boxes > div.item6{
  width:50px;
  height:50px;
  float:right;
}

<div class="boxes">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</div>

Answer 1

如果您打算使用绝对单位(如您的示例)而不是使用相对单位(如 % 或 em)构建元素维度，并且如果您真的(真的)不想在你的 .boxes 元素中定义另一个容器，如果你需要针对旧浏览器，你可以使用 absolute positioning .

注意，不推荐这种定位，因为它很难(或不可能)正确使用响应式网页设计风格。

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).

使用此技术，您将能够精确定位要固定元素的位置(相对于祖先而不是之前的兄弟)。因此，使用 top/bottom 和 left/right 属性来固定来自已定位祖先的元素。例如，top: 5px 将从第一个定位祖先的顶部 5px 开始固定元素(使用 absolute 或 relative)。您可以使用像素、百分比或您需要的所有其他单位来设置这些属性。

所以，为了回答你的问题，我在下面写的这个例子是为了提供一种实现你的目标的方法，但我不建议使用它...... 你绝对应该创建另一个 div以便将您想要的元素一层一层地包裹起来。

:root {
  --boxes-width: 450px;
  --boxes-height: 100px;
  --item-padding: 10px;
  --item-width: 50px;
}

.boxes {
  position: relative;
  width: var(--boxes-width);
  height: var(--boxes-height);
  border:1px solid #fff;
  background:#000;
  float:left;
}

.item {
  position: absolute;
  background:#bf00bd;
  border:1px solid #999;
  top: var(--item-padding);
}

.item:first-child {
  width:var(--item-width);
  height:calc(var(--boxes-height) - var(--item-padding) * 2);
  left: var(--item-padding);
}
.item:nth-child(2),
.item:nth-child(3) {
  width: calc(var(--item-width) * 2);
  height:calc((var(--boxes-height) - var(--item-padding) * 2) / 2 - (var(--item-padding) / 2));
  left: calc(var(--item-width) + (var(--item-padding) * 2));
}
.item:nth-child(3) {
 top: calc(var(--boxes-height) / 2 + (var(--item-padding) / 2));
}

.item:nth-child(n+4) {
  position: relative;
  float: right;
  width: var(--item-width);
  height: calc(var(--boxes-height) - var(--item-padding) * 2);
  margin-right: var(--item-padding);
}

<div class="boxes">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

实际上，即使在很多情况下不推荐这种技术，它也可以满足您的需求。有时，绝对定位是最好的选择。这取决于您的目标、代码为您提供的灵 active 以及您想要定位的浏览器。做事与不做事没有标准的方法，因为使用绝对定位本身并没有错。 尽管如此，还是有一些最常见的用法可以让您的代码更易于维护，并针对跨用法的可访问性进行更优化。

在您的情况下，我认为您可以通过父 div 将您想要的元素一个接一个地包装起来。实际上，已经创建了 div 元素，以便可以将一些代码合并到一个特殊的布局中。将 div 用作其他 div 包装器中的容器并不是一个坏习惯。但是你应该避免在不需要时使用无用的包装器，因为它会减慢渲染、DOM、CSSOM 关系并使你的代码更难阅读(以及其他问题)。您是唯一可以判断是否有必要的人。简而言之，使用一个或两个包装器绝对不是一个坏习惯。

因此，根据您的目标浏览器，实现它的一个好方法可能是:

我更新了我的答案，为您提供更多提示，让您了解您的选择。当您在示例中使用 float 系统时，我编写了一个代码来使用它，并且它与许多(和旧的)浏览器兼容。

以下代码可以根据您的需要进行优化，我在您编写代码时重复使用了您的代码。此外，我自愿使用 float 系统而不是 grid 或 flexbox 系统，以便尽可能针对大多数浏览器。请记住，网格系统是另一种(非常)好的现代减少代码的方法，但它目前不适用于所有浏览器。正如在另一个答案中编码的那样，grid 布局非常强大，您应该考虑一下。特别是因为所有现代浏览器都可以使用它。

.boxes{
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 100px;
  border:1px solid #fff;
  background:#000;
  float:left;
  padding: 10px;
  box-sizing: border-box;
}

.box { 
  height: 100%;

}
.box--left{ float: left }
.box--left > .item { float: left; }
.box--right{ float: right }
.box--right .item:last-child { margin-right: 0; }
.box-vert { 
  width: 100px;
  float: left;
}
.box-vert .item { 
  height: calc(50% - 5px);
  width: 100%;
}

.item{
  background:#bf00bd;
  border:1px solid #999;
  width: 50px;
  height: 100%;
  margin-right: 10px;
  display: inline-block;
}

<div class="boxes">
  <div class="box box--left">
    <div class="item"></div>
      <div class="box box-vert">
        <div class="item"></div>
        <div class="item"></div>
     </div>
  </div>
  <div class="box box--right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>