这可能是我第一次尝试在线询问有关 CSS 或 HTML 的问题,但正如标题所述,当浏览器窗口缩小时,我遇到了 div 在彼此下方折叠的问题(浏览器窗口那不是全屏)。
div 被设置为 3 个 div,在一个 div 周围,3 个 div 将水平放置在屏幕上。如果窗口不再大到无法水平显示所有内容,我希望浏览器显示水平滚动条,而不是让窗口像现在这样折叠。
下面正是我为 div 设置的内容,这些内容目前让我非常沮丧。
.wrap {
height:auto;
width:100%;
margin:10px 0 0 0;
overflow:hidden;
}
.box1 {
height:320px;
width: 240px;
border: 1px solid #777;
margin: 0 0 0 10px;
display: inline-block;
float:left;
}
.box2 {
height:320px;
width:62%;
margin: 0 -3px 0 1px;
border: 1px solid #777;
display:inline-block;
}
.box3 {
height:320px;
width: 240px;
border: 1px solid #777;
display: inline-block;
}
最佳答案
漂浮……漂浮,通常以意想不到或不受欢迎的方式。请改用 inline-block
布局,并在包装器上使用固定宽度。
.wrapper {width: 960px;}
.box {width: 240px; display: inline-block;}
.box:nth-child(2) {width: 480px;}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
关于html - 当浏览器窗口按比例缩小时,div 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14700281/