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

Question

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

通常，对于带有容器的垂直网站，您需要在容器元素上设置一个基于百分比的宽度，然后设置一个最大宽度。 使用响应式布局，您的内容可以无限滚动到页面之外，它的宽度可以变化，尤其是在内容是唯一的情况下，因此公式target / context * 100不能真正起作用（或起作用吗？）。

也许有一种方法可以使元素具有响应高度，填充和边距，以使其像使用基于网格的响应网站一样起作用。 我不介意使用Javascript，但CSS修复将是理想的选择。

作为参考，我尝试创建一个布局类型的示例：

Answer 1

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

HTML结构：

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

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

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计算完整宽度并将其应用于包装器，并获得相同的结果。 这应该可以满足大多数需求。