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

Question

我工作的创意设计工作室喜欢打破范例和约定来创建独特的网站布局，最近我们已经开始开发水平网站布局。虽然水平网站布局看起来“很酷”，但我还没有弄清楚如何使它们像流动和响应一样，可以通过基于垂直网格的网站开箱即用。

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

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

供您参考布局类型的一个例子，我想创建：

Answer 1

您可以通过计算页面容器div的子元素.outerWidth并添加它们放在一起，并追加使用jQuery做到这一点页面或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计算完整宽度并将其应用于包装，并得到相同的结果。这应该适用于大多数需求。