Question

我正在使用骨架进行流畅的布局，并且它主要运行良好，但我在magento上的这个2列布局有问题：http://watchgearonline.co.uk/watch-straps.html

左侧边栏上的导航设置为3列，右侧的主要部分设置为12列。

当你减小页面的宽度时，右手边会跳到下面，左手突然变得非常宽，以便进行补偿，而且看起来很漂亮。

我尝试使用CSS max-width：160px来阻止它;应用于左侧边栏 - 它更好但仍然不是很好。如果右手栏没有跳下来并且只是坚持下去，我更愿意。

如何强制右手柱保持原位，但仍然保持其尺寸和内容保持流畅？或者将骨架带出这个区域并将其作为静态内容更好？

Answer 1

为了获得流畅的布局，我建议您在width中使用%来获得更小的屏幕。在媒体查询中，元素的所有width都以像素为单位。例如：

@media only screen and (max-width: 767px) and (min-width: 480px){
    .container {
        width: 420px;
     }
}

这是skeleton.css中div类container的样式。因此，当您调整窗口大小并且宽度低于767px时，主容器的width将更改为420px。左侧栏和产品列表div（右侧部分或主要部分）也有以像素为单位指定的宽度，右边的部分在下面跳转，因为这两个块没有空间并排排列。

@media only screen and (max-width: 767px) and (min-width: 480px){
        .container {
            width: 90%;
         }
        .container .sidebar.three.columns{
            max-width: 20%;
         }
         .container .twelve.columns{
             width:75%;
             padding-right:0;
         }
    }

尝试上面的css，看看在调整窗口大小时div如何移动流体。这只是一个示例代码，用于显示使用%宽度时块移动流体。同样，在媒体查询中为不同的屏幕使用%宽度。

希望这对你有所帮助。

骷髅锅板 - 防止某些元素的移动

1 个答案: