0

我正在使用骨架来制作流畅的布局，并且它大部分都运行良好，但是我在 magento 上的这个 2 列布局存在问题：http ://watchgearonline.co.uk/watch-straps.html

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

当你缩小页面宽度时，右手边跳到下面，左手突然变得很宽来补偿，看起来不太好看。

我试图通过使用 CSS max-width: 160px; 来阻止它。应用于左侧边栏 - 它更好但仍然不是很好。我宁愿右手的柱子没有跳下来，而是留在原地。

如何强制右侧列保持原位，但仍保持其大小和内容保持流动？还是将骨架带出该区域并将其作为静态内容会更好吗？

4

1 回答 1

0

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

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

这是骨架.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当你调整窗口大小时 s 是如何移动的。这只是一个示例代码，用于显示当您使用%宽度时块移动流体。类似地%，在媒体查询中为不同的屏幕使用宽度。

希望这对您有所帮助。

于 2014-03-25T11:41:55.833 回答