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

时间:2018-02-07 12:59:50

标签: html css

我有三个有一些内容的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>

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

1 个答案:

答案 0 :(得分:1)

方法1)使用%

1)您必须使用%代替px widthmargin,例如:

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

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

3)我删除了widthidmargin: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>