Question

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

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

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

供您参考我想要创建的布局类型的示例：

enter image description here

Answer 1

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

来使用jQuery来执行此操作

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

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

2 个答案: