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

Question

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

通常，对于带有容器的垂直网站，您会在容器元素上设置一个基于百分比的宽度，然后设置一个最大宽度。使用响应式布局，您的内容会无限滚动到页面外，它的宽度可能会有所不同，特别是如果内容是唯一的，因此公式 target/context * 100 并不起作用（或者确实如此？）。

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

我正在尝试创建的布局类型示例供您参考：

Answer 1

您可以使用 jQuery 通过计算页面容器 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'});
    }
}

Answer 2

有很多方法可以做到这一点。

如果您知道页面的确切宽度，您可以制作一个包装器 div，设置全宽，然后像这样在包装器内并排浮动您的内容 div：

<div style="width: 2500px; border: red solid 1px;">
  <div style="width: 500px; float: left;">Content</div>
  <div style="width: 500px; float: left;">Content</div>
  <div style="width: 500px; float: left;">Content</div>
  <div style="width: 500px; float: left;">Content</div>
  <div style="width: 500px; float: left;">Content</div>
</div>

如果您知道确切的宽度，这是最简单的解决方案。

如果宽度未知或变化，您可以使用 JavaScript 计算整个宽度并将其应用于包装器，结果相同。这应该可以满足大多数需求。