cbm*_*trx 4 sidebar fixed zurb-foundation
自从v3开始我一直在使用基金会,所以我没想到会有这种混乱.
在这种特殊情况下,我需要一个固定宽度的左列(大3),然后是剩余的流体/响应内容列(大9).
<div class="row">
<div class="large-3 columns" id="sidebar" style="width: 300px">
sidebar
</div>
<div class="large-9 columns" id="content">
content
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
问题是,缩小时,内容列在侧边栏下方包裹/被强制下降(甚至在超过下一个屏幕宽度阈值之前).我在#sidebar中尝试了"固定"和"粘性"类,但它们似乎不会影响此行为.
如果存在(Foundation?)解决方案,我不想开始破解CSS.
有什么建议?
就像@ naota的方法一样,我从Zurb得到的回应就是破解css.设置一个绝对定位的固定宽度侧边栏,然后用左边填充创建一个新的div:300px;
就像是:
<div class="row">
<div id="sidebar" style="position: absolute; width: 300px;">
</div>
<div class="large-12 columns" id="content" style="padding-left: 300px">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
它的效果非常好......对于黑客来说.
| 归档时间: |
|
| 查看次数: |
7073 次 |
| 最近记录: |