我可以將頁面向下而不是跨過頁面嗎？

如果我有div元素的集合，我可以使用CSS讓它們流過頁面並溢出到下一行。我可以將頁面向下而不是跨過頁面嗎？

這裏有一個簡單的例子：

<html> 
    <head> 
    <title>Flowing Divs</title> 
    <style type="text/css"> 
     .flow { 
     float: left; 
     margin: 4em 8em; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="flow">Div 1</div> 
     <div class="flow">Div 2</div> 
     <div class="flow">Div 3</div> 
     <div class="flow">Div 4</div> 
     <div class="flow">Div 5</div> 
     <div class="flow">Div 6</div> 
     <div class="flow">Div 7</div> 
     <div class="flow">Div 8</div> 
    </div> 
    </body> 
</html>

是否有可能具有的div流下來的網頁，而不是越過它，這樣他們就流了下來列不是沿着線，但仍然佔據相同的空間他們會如果他們流過？

因此，對於上述示例，如果它們流入兩行四個div，是否可以獲得包含Div1和Div2而不是Div1和Div5的第一列？

來源

2010-03-17 Brabster

不，我不相信這是可能的。 – inkedmn 2010-03-17 19:02:49

所以你最終想要div的列，對嗎？ 1-4在左邊，5-8在右邊？ – 2010-03-17 19:04:30

@神殿 - 理想情況下，四列，以便相同的空間被佔用，就好像它們流入兩條線。但是，如果這是不可能的，並且可以按照你所描述的做兩列，我想知道如何。 – Brabster 2010-03-17 19:07:32

趕緊扔了一起：

#column1 {float:left} 
#column2 {float:left} 
div div{height:100px;width:100px;border:1px solid} 

<div id="column1">  
     <div>1</div> 
     <div>2</div> 
</div> 
<div id="column2"> 
     <div>3</div> 
     <div>4</div> 
</div>

來源

2010-03-17 19:34:26 Rob

標記代碼並點擊代碼按鈕:) 無論如何，這可能工作，但它需要很多（恕我直言）unnessecary CSS，再加上它非常...非動態。：p – 2010-03-17 19:49:01

在輸入答案的文本框旁邊有一個標題爲「如何格式化」的大框。 – 2010-03-17 19:51:04

老實說，我首先做了4空間的事情，它沒有工作，但不知道我做錯了什麼。 – Rob 2010-03-17 19:56:47

不，這是不可能的。最簡單的解決方法是通過添加包裝DIV來創建單獨的列，然後將內容添加到每個列。這也可以使用Javascript或服務器端動態生成。

來源

2010-03-17 19:15:26

不，你不能，但你可以安排他們，但是你想使用絕對定位。但是，這樣做意味着您必須明確設置每個元素的位置，而這通常是不希望的。

對標記的簡單調整可以使其工作。以下是你想看到的嗎？

<html> 
    <head> 
    <title>Flowing Divs</title> 
    <style type="text/css"> 
     .container { 
     float:left; 
     } 
     .flow { 
     margin: 4em 8em; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="flow">Div 1</div> 
     <div class="flow">Div 2</div> 
     <div class="flow">Div 3</div> 
    </div> 
    <div class="container"> 
     <div class="flow">Div 4</div> 
     <div class="flow">Div 5</div> 
     <div class="flow">Div 6</div> 
    </div> 
    <div class="container"> 
     <div class="flow">Div 7</div> 
     <div class="flow">Div 8</div> 
    </div> 
    </body> 
</html>

來源

2010-03-17 19:44:47

不幸的是，它不能在純html/css中完成。下面是一個如何在javascript中完成的例子。它可以變得更高效，但更難學習。我沒有在IE/Safari中測試，但在FF中工作。

使用方法： - 類 '容器' 添加到流動容器 - 這就是它

享受:)。

<html> 
<head> 
<title>Flowing Divs</title> 

<style type="text/css"> 
.container { 
    float: left; 
    height: 1px; 
} 

.col { 
    float: left; 
} 

#container-1 { 
} 

.flow { 
    float: left; 
    margin: 4em 8em; 
    width: 200px; 
    height: 100; 
    overflow-y: hidden; 
} 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
</head> 

<body> 

<div id="container-1" class="container"> 
    <div class="flow">Div 1</div> 
    <div class="flow">Div 2</div> 
    <div class="flow">Div 3</div> 
    <div class="flow">Div 4</div> 
    <div class="flow">Div 5</div> 
    <div class="flow">Div 6</div> 
    <div class="flow">Div 7</div> 
    <div class="flow">Div 8</div> 
    <div class="flow">Div 9</div> 
    <div class="flow">Div 10</div> 
    <div class="flow">Div 11</div> 
    <div class="flow">Div 12</div> 
    <div class="flow">Div 13</div> 
    <div class="flow">Div 14</div> 
    </div> 

    <script type="text/javascript"> 

    /** 
    * Setup some event handling and stuff 
    */ 

    // Create flowing container after dom is populated 
    $(document).ready(function() 
    { 
     createFlowingContainer('#container-1'); 
    }); 

    $(window).resize(function() 
    { 
     // Recreate flow for all containers without fixed heights 
     $('.container-autosize').each(function(i, container) 
     { 
      var container = $(container); 

      // Update container dimenions 
      container.height($(window).height());  

      createFlowingContainer(container); 
     }); 
    }); 

    /** 
    * Magical function 
    */ 

    createFlowingContainer = function(container) 
    { 
     var container = $(container); 

     // Columns counter 
     var colNum = 0;  

     // Some more counter vars, these reset when a new column is created 
     var colHeight = 0; 
     var colWidth = 0; 
     var containerWidth = 0; 

     var itemNum = 0; 

     // Get height of container 
     var containerHeight = container.height(); 

     // Has the container height been defined? 1px is the default height (as defined in the css) 
     if (containerHeight == 1) 
     { 
      // Set the container height default value 
      containerHeight = $(window).height(); 

      // Used to resize container on window resize events 
      container.addClass('container-autosize'); 

      // Update container height 
      container.height(containerHeight); 
     } 

     var containerElements = container.children('div :not(.col)'); 

     if (containerElements.length == 0) 
     { 
      containerElements = $('[itemNum]'); 
     } 
     else 
     { 
      container.children('div').each(function(i, o) 
      { 
       $(o).attr('itemNum', itemNum); 

       itemNum++; 
      }); 
     } 

     var containerTmp = container.clone(); 
     containerTmp.html('');  

     containerElements.each(function(i, ele) 
     { 
      var ele = $(ele); 

      // Get the item's height with padding & margins included 
      var eleWidth = ele.width(); 
      var eleHeight = ele.outerHeight(true); 

      // Can the current column fit this item? 
      if ((eleHeight + colHeight) > containerHeight) 
      { 
       // Reset calculated height of column & advance column pointer 
       colHeight = 0; 
       colNum++; 
      } 

      // Get the column container 
      var column = containerTmp.find('.col-' + colNum); 

      // Does the column exist? If not, its a new column and we'll need to create it 
      if (column.length == 0) 
      { 
       column = $('<div class="col col-' + colNum + '"></div>'); 

       // Append column to container 
       containerTmp.append(column); 
      } 

      // Keep track of widest ele in column, used for setting width of container 
      if (eleWidth > colWidth) 
      { 
       colWidth = eleWidth; 
      } 

      column.width(colWidth); 

      // Increment the calculated column height 
      colHeight += eleHeight; 

      // Append element to column 
      column.append(ele); 
     }); 

     container.html(containerTmp.html()); 

     // Calculate container width 
     container.children('.col').each(function(i, o) 
     { 
      containerWidth += $(o).width(); 
     }); 

     container.width(containerWidth); 
    }; 
    </script> 

</body> 
</html>

來源

2010-03-17 20:56:51

我可以將頁面向下而不是跨過頁面嗎？

回答

相關問題