如何使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。

请注意，不建议使用这种定位方式，因为这样很难（或不可能）正确地使用响应式网页设计风格。

  

相对定位的元素保留在文档的正常流程中。相反，从流中取出了绝对定位的元素。因此，其他元素的位置就好像它不存在一样。绝对定位的元素相对于其最近定位的祖先（即，不是静态的最近祖先）定位。

使用此技术，您将能够精确定位想要固定物品的位置（相对于祖先而不是先前的同级物品）。因此，请使用top / bottom和left / right属性，以固定来自已定位祖先的元素。例如，top: 5px将从第一个定位祖先的顶部5px（使用absolute or 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>

实际上，即使在很多情况下不建议使用此技术，它也可以满足您的需求。有时，绝对定位是最好的选择。这取决于您的目标，代码给您的灵活性以及要定位的浏览器。没有标准的做事方法或不做事的方法，因为使用绝对定位没有天生的错误。 不过，最常见的用法是使您的代码更易于维护，并针对各种用法的可访问性进行了优化。

就您而言，我认为您可以由父母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>

Answer 2

您始终可以使用CSS grid，而无需定位绝对的父div包装器，并且可以根据需要使其灵活。

.boxes{
  display: grid;
  border:1px solid #fff;
  background:#000;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  height: 150px;
}
.boxes > div{
  background:#bf00bd;
  border: 1px solid #fff;
}
.item1{
  grid-row: 1/3;
  grid-column: 1/2;
}
div.boxes > div.item2{ 
  grid-row: 1/2;
  grid-column: 2/3;
}
div.boxes > div.item3{
  grid-row: 2/3;
  grid-column: 2/3;
}
div.boxes > div.item4{
   grid-row: 1/3;
  grid-column: 4/5;
}
div.boxes > div.item5{ 
   grid-row: 1/3;
  grid-column: 5/6;
}
div.boxes > div.item6{
  grid-row: 1/3;
  grid-column: 6/7;
}

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