html - 当浏览器窗口按比例缩小时,div 换行

标签 html css

这可能是我第一次尝试在线询问有关 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/

相关文章:

javascript - 当用户向下滚动我的网页 100 像素左右时淡出图像(向下箭头)

html - 如何检查 HTML 文件的语法是否正确?

php - foreach()表有空白吗?

Javascript 和 Internet Explorer 8 错误

css - Chrome 截掉了 Oswald-Light 字体

javascript - 在 Ember 中创建一个输入类型 ="date"

jquery - 选择带有悬停的 jquery 子项

css - 如何在 google chrome 的开发者工具中显示样式表的路径?

jquery - CSS !important 似乎在 jQuery/Firefox 3.x 中不起作用

php - 图库图像过渡