html - 如何使用 CSS 创建响应式水平布局？

Question

我在一家创意设计工作室工作，他们喜欢打破范式和惯例来创建独特的网站布局，最近我们开始开发横向网站布局。虽然水平网站布局看起来“很酷”，但我还没有想出如何使它们像开箱即用的基于垂直网格的网站一样流畅和响应迅速。

通常对于带有容器的垂直网站，您会在容器元素上设置一个基于百分比的宽度，然后设置一个最大宽度。使用响应式布局，您的内容会无限滚动离开页面，它的宽度可能会发生变化，尤其是当内容是唯一的时，因此公式 target/context * 100 并不真正起作用(或者是吗？)。

是否有一种方法可以在元素上设置响应式高度、填充和边距，使其像基于网格的响应式网站一样工作。我不介意必须使用 Javascript，但 CSS 修复会更理想。

我尝试创建的布局类型示例供您引用:

Answer 1

您可以通过计算页面容器 div 的子元素 .outerWidth 并将它们全部相加并将其附加到页面或 div 的 .css('width')

HTML 结构:

<div id="main">
    <div><img src="#" /></div>
    <div><img src="#" /></div>
    <div><img src="#" /></div>
</div>

编辑:我忘了添加 css，但这里的要点是您希望 #main 的子 div 向左浮动。

Javascript:

function() {
        var window_width = jQuery(window).width(),
            container = jQuery('#main'),
            page_width = 0;

        // Grab every child element of the "main" container
        container.children().each(function(index){
            var incl_margin = true,
                $this = jQuery(this);

            // Check if each child element has a margin-left or margin-right
            if ( parseInt($this.css('margin-left')) < 0 || parseInt($this.css('margin-right')) < 0 ) {
                var incl_margin = false;
            }

            // Get element's width including margins (if they exist from above)
            var width = $this.outerWidth(incl_margin);
            page_width += width;

        });

        // Add total width of containers elements as the containers width
        if(page_width > 0)
            container.css({'width' : page_width + 'px'});
    }
}