Question

如果我有一个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吗？

Answer 1

不，这是不可能的。最简单的解决方法是通过添加包装器DIV，然后向每个列添加内容来创建单独的列。这也可以使用Javascript或服务器端动态生成。

Answer 2

快速将它们放在一起：

#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>

Answer 3

不，你不能，但你可以通过使用绝对定位来安排它们。但是，这样做意味着您必须明确设置每个元素的位置，这通常是不受欢迎的。

对标记的简单调整可以使这项工作成功。以下是您想看到的内容吗？

<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>

Answer 4

不幸的是，它无法在纯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>

我可以在页面上而不是跨越div来传输div吗？

4 个答案: