5

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

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

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

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

在此处输入图像描述

4

2 回答 2

4

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

HTML结构：

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

编辑：我忘了添加 css，但这里的重点是你希望子 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'});
    }
}
于 2012-10-12T20:06:55.447 回答
1

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

如果您知道页面的确切宽度，您可以制作一个包装器 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 计算整个宽度并将其应用于包装器，结果相同。这应该适用于大多数需求。

于 2012-07-12T03:35:48.167 回答