时间戳

首页 > 解决方案 > 如果将大小调整回与页面加载时相同的大小，则引导列布局会在调整大小时中断

html - 如果将大小调整回与页面加载时相同的大小，则引导列布局会在调整大小时中断

问题描述

如果我加载我的页面一切都很好。 <div class="sidebar">正好使用 320 像素，而<div class="col">使用左侧的剩余空间。两个 div 都在一行中（并排）。

如果我放大浏览器窗口，一切都很好（div 是并排的）。

如果我现在让浏览器窗口变小（到原始大小，页面加载时），布局会立即中断（<div class="sidebar">现在在下面 <div class="col">）。

如果我现在重新加载浏览器窗口，一切都会再次正常。

似乎左侧<div class="col">的重新渲染速度不够快。因此，当缩小窗口大小时，侧边栏会放在下方<div class="col">。

是否有另一种方法来制作这样的布局：一个 div 使用固定宽度作为侧边栏，另一个 div 使用灵活宽度（在侧边栏旁边的行中留下空间）。

我正在使用以下标记：

<div class="row">
    <div class="col">
    ...
    </div>
    <div class="sidebar">
    ...
    </div>
</div>

CSS：

.sidebar {
    width: 320px;
    padding: 10px 10px 0;
    background: #FFFFFF;
    margin-bottom: 20px;
    z-index: 1;
    display: block;
}

页面加载时的屏幕截图（浏览器窗口 = 1095px）： 带侧边栏的图像

浏览器窗口放大缩小后的截图（到页面加载时的原始大小（浏览器窗口= 1095px）！）： 没有侧边栏的图像

现场示例：https ://www.lotsearch.net/artist/pablo-picasso

标签： htmlcsstwitter-bootstrapcss-multicolumn-layout

解决方案

利用calc

.sidebar {
  width: 320px;
}
.col {
  width: calc(100% - 320px);
}

sidebar将覆盖 320px 宽度col并将覆盖所有剩余空间。

推荐阅读