代码之家 › 专栏 › 技术社区 › brabster

我能在页面上向下而不是横过它吗?

css-float css

brabster · 技术社区 · 16 年前

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

4 回复 | 直到 14 年前

Rob 16 年前

很快就把这个拼凑起来了

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

Arve Systad 16 年前

不,不可能。最简单的解决方法是通过添加包装div来创建单独的列,然后向每个列添加内容。这也可以通过Javascript或serverside动态生成。

Josh Stodola 16 年前

不,你不能,但是你可以通过绝对定位来安排它们。但是,这样做意味着您必须显式地设置每个元素的位置,这通常是不需要的。

不过,对标记进行简单的调整就可以实现这一点。下面是你想看的吗?

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

John Himmelman 16 年前

不幸的是,它不能在纯html/css中完成。下面是一个如何用javascript实现的示例。它可以提高效率,但更难学习。我没有在IE/Safari中进行测试,但在FF中工作。

使用方法: -将类“container”添加到流容器 -就这样

享受:)。

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