第三个div不填充第一个div下方的空间

Question

我有三个有一些内容的div。在宽屏幕上，它们都在一排。当我调整屏幕大小时，会发生以下情况： Screenshot

我希望底部div填充顶部的空格，如Screenshot 2。同样在小屏幕上，所有三个div应该叠加在一列中，因此添加float：从右到右div不起作用。我正在为Web Outlook中的电子邮件进行此操作，因此无法使用媒体查询。

这是代码

div {
  display: inline-block;
  font-size: 50px;
  text-align: center;
  color: white;
  border: 2px solid black;
}

div {
  background: red;
  margin: 10px;
}

#top {
  width: auto;
  display: inline-block;
  vertical-align: top;
}

#bottom {
  width: auto;
  display: inline-block;
  vertical-align: top;
}

#right {
  width: auto;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}

<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</div>

感谢对这种情况的一些建议。

Answer 1

方法1）使用%：

1）您必须使用%代替px width和margin，例如：

div {
    width: 30%;
    //Other css...
}

2）使用word-break: break-all;

3）我删除了width个id和margin:10px（您可以使用%作为保证金，我将其删除，因为display:inline-block插入了保证金自动地）

div {
    display: inline-block;
    font-size: 50px; 
    text-align: center;
    color: white;
    border: 2px solid black;
    background: red;
    width: 30%;
    word-break: break-all;
}

#top {
    display: inline-block;
    vertical-align: top;
}

#bottom {
    display: inline-block;
    vertical-align: top;
}

#right {
    height: 200px;
    display: inline-block;
    vertical-align: top;
}

<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</div>

方法2）使用flex：

.wrapper {
    display: flex;
    flex-wrap: wrap;
}
div:not(.wrapper) {
    font-size: 50px; 
    text-align: center;
    color: white;
    border: 2px solid black;
    background: red;
    word-break: break-all;
    flex-grow: 1;

}

#top {
    vertical-align: top;
    
}

#bottom {
    vertical-align: top;
}

#right {
    height: 200px;
    vertical-align: top;
}

<div class="wrapper">
    <div id="top">111111111111111111</div>
    <div id="right">2222</div>
    <div id="bottom">333333333333333</div>
</div>