html三个盒子在一行，盒子4在盒子r的正下方

可以使用CSS中的flex布局或者浮动来实现三个盒子在一行并且盒子4在盒子3的正下方的效果。

使用flex布局：

HTML代码示例：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

CSS代码示例：

.container {
  display: flex;
  flex-wrap: nowrap; /* 不换行 */
}

.box1, .box2, .box3, .box4 {
  flex: 1; /* 平分宽度 */
}

.box4 {
  align-self: flex-start; /* 沿着交叉轴的起始边对齐 */
  margin-left: auto; /* 自动向左对齐 */
}

使用浮动：

HTML代码示例：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

CSS代码示例：

.container {
  overflow: hidden; /* 清除浮动 */
}

.box1, .box2, .box3 {
  float: left;
  width: 33.33%;
}

.box4 {
  clear: both; /* 清除浮动 */
  margin-top: 10px; /* 相对于盒子3的位置 */
}