我创建了一个简单的HTML页面，其中有一个div在两个轴上都启用了溢出功能的父级。现在在其中div，div我想并排放置2 s。
#Result {
margin: 0 auto;
padding: 0;
background-color: rgba(0, 0, 0, .02);
padding-top: 25px;
font-size: 16px;
overflow: scroll;
width: 99%;
height: calc(100% - 90px - 70px);
position: absolute;
}
#Left,
#Right {
height: calc(99vh - 90px - 70px);
width: 28vw;
margin: 0 auto;
padding: 0;
display: inline-block;
float: left;
text-align: center;
background-color: rgba(0, 0, 0, .04);
border-right: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6;
}
#Right {
background-color: rgba(0, 0, 0, .5);
border-right: 0px solid #737373;
padding-left: 15px;
margin-right: 15px;
width: 2000px;
}<div id='Result'>
<div id='Left'>
</div>
<div id='Right'>
</div>
</div>Codepen- https: //codepen.io/Volabos/pen/qBdNyPa ? editors = 1100
但是，不幸的div是，如果第3个宽度较大，则会向下移动。如何将第二和第三div并排放置？
您可以安全地为父母display:flex+overflow:auto和孩子flex-shrink:0或min-width:xx
可能的例子
#Result {
display: flex; /* flex model */
overflow: auto;
height: 100vh; /* whatever or min-height or let grow from content */
}
#Right,
#Left {
flex-shrink: 0; /* do not allow childd to shrink and allow overflow */
}
#Left {
width: 28vw; /* whatever */
}
#Right {
width: 100vw; /* whatever */
}
/* demo purpose */
div div {
border: solid;
}
#Left {
background: lightblue;
}
#Right {
background: lightgreen;
}
* {
margin: 0;
box-sizing: border-box;
}<div id='Result'>
<div id='Left'>
</div>
<div id='Right'>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句