我有三个有一些内容的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>
感谢对这种情况的一些建议。
答案 0 :(得分: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>