将div推到左下角

Question

我需要div“3”像第二张图片一样被推到左下角。问题是，“1”div大于“3”，因此我当前的设置float: left不起作用。

我有div，其中包含我所有编号的div（蓝色矩形）。 代码为“1”div：

.mainItemPhoto {
    min-width: 474px;
    float: left;
    padding-right: 25px;
}

“2”：

div.directionInformation {
    padding-left: 34px;
}

“3”：

.additionalItemPhotos {
    float: left;
}

“4”：

div.aditionalInfo {
    float: left;
    width: 475px;
    font-size: 15px;
}

Answer 1

为第三个元素的CSS规则添加“clear”：

.additionalItemPhotos {
    float: left;
    clear: both;
}

这会将第三个元素推到代码中的第三个元素之下。

Answer 2

您可以将div＃2和＃3放在一起，将它们包装在一个容器中并将浮点数应用于它。这也允许您从其他元素中删除浮动属性。我还提供了一个媒体查询，用于填充800px以下设备的照片下的div，但您可以根据＃2和＃3中内容的实际宽度进行调整。

您必须将以下示例视为完整页面才能查看结果。

/*  Just for the example; you likely won't need this in your stylesheet */

div {
  background: grey;
  padding: 50px;
}

.mainItemPhoto {
  min-height: 474px;
}

.infoWrapper {
  padding: 0;
}

.infoWrapper > div {
  background: red;
}


/* Actual layout styles */

* {
  box-sizing: border-box;
}

.mainItemPhoto,
.infoWrapper,
.additionalInfo {
  margin: 10px;
}

.mainItemPhoto {
  min-width: 474px;
}

.additionalInfo {
  width: 475px;
}

@media only screen and (max-width:799px) {
  .mainItemPhoto,
  .infoWrapper,
  .additionalInfo {
    margin-right: auto;
    margin-left: auto;
  }
  .infoWrapper {
    width: 475px;
  }
}

@media only screen and (min-width:800px) {
  .mainItemPhoto {
    display: inline-block;
  }
  .infoWrapper {
    float: right;
  }
}

<div class="mainItemPhoto">#1</div>
<div class="infoWrapper">
  <div class="directionInformation">#2</div>
  <div class="additionalItemPhotos">#3</div>
</div>
<div class="additionalInfo">#4</div>