表格布局等效使用DIV

时间：2009-03-06 10:12:55

标签： html css layout

我今天正在努力创建一个布局，如下所示：

+----+ +----+ +----+ +----+
|    | |    | |    | |    |
+----+ +----+ +----+ +----+

看起来很简单，但我有一些额外的规格：

  1. 最大列数（n）需要是动态的（此HTML页面是在运行时生成的。）
  2. 整个装置必须是水平流动的（当窗口变窄时，它们会尽可能地压缩。
  3. 整个集合也必须在屏幕上居中，每次任意一行不超过n列。
  4. 理想情况下，最右边的“盒子”会掉到下面的行中，并在必要时重新排列，即当窗口变窄并且n个盒子不适合屏幕时。
  5. 当然，当要显示的元素超过n个时，只需创建其他行。
  6. 各个方框都有圆角边框，无论何种动作都可点击。

    7. 通过一些研究（谷歌+对我发现的例子的改编），我能够像我想要使用div和css一样做＃6。但是，我很难做2-4。我几乎一直在那里，但是，对于我的生活，我无法获得2和3的工作。 2并不是那么重要，但3是至关重要的。我正在使用浮动div进行定位，并发现example site提到使用相对定位和向左移动以使其居中但是它在我的情况下不起作用（尽管示例工作正常）。在我的情况下，他们不是居中，而是在中心开始并向右走，使它看起来很可笑，所以我不知道我错过了什么。

    经过几个小时的努力，我在5分钟内完成了以下代码：

    <simplified code>
max_columns = 3; /* whatever */
html = "<table>";
for i = 1 to num_elements
  if i % max_columns eq 1 then
    html += "<tr>";
  endif
  html += "<td>";
  html += "<div>my element</div>"; /* This is a complex multi-leveled div */
                                   /* that makes boxes with rounded corners */
  html += "</td>";
  if i % max_columns eq 0 or i eq num_elements then
    html += "</tr>";
  endif
endfor
html += "</table>";
</simplified code>

    这满足了我的所有要求，除了＃4，这是一个很好的但不是必需的。

    问题：[你怎么样] / [有没有办法]不使用表格呢？

    编辑：我没有机会实施/测试下面的任何潜在解决方案，因为我需要在回到此之前完成其他方面（在接下来的5天内）问题。我当前的 lame （？）解决方案似乎工作正常，除了req＃4，所以这个问题现在不在我的关键路径上。但我将测试并尽快发布反馈意见。所以我要打开这个问题直到那时。我很欣赏这些回复。感谢。

    编辑＃2 ：所以我尝试了下面的一些解决方案，这就是我想出来的：

    <html>
    <head>
    <style>
  .box {
          width: 19%;
          height: 150px;
          border: 1px solid black;
          display: inline-block;
          margin: 3 0 0 0;
  }
  #center {
          text-align: center;
          border: 1px solid green;
          width: 80%;
          height: 85%;
          padding: 0 0 0 0;
          vertical-align: middle;
          margin: 0;
  }
  .footr{
          text-align: center;
          border: 1px solid green;
          width: 80%;
          height: 38px;
          padding: 0 0 0 0;
          vertical-align: middle;
          margin: 0;
  }
  </style>
    </head>
    <body style="margin-left:0; margin-top:0; margin-right:3;" >
    <div style="background-image: url(x); height: 60; width:131; float:left;"></div>
    <div style="background-image: url(x); background-repeat:repeat-x; height:60;"></div>
    <div class="clearer"></div>
    <center>
    <div id="center">
          <span class="box" style="float:left;">Blah</span>
          <span class="box">Blah</span>
          <span class="box">Blah</span>
          <span class="box">Blah</span>
          <span class="box" style="float:right;">Blah</span><br>
          <span class="box" style="float:left;">Blah</span>
          <span class="box">Blah</span>
          <span class="box">Blah</span>
          <span class="box">Blah</span>
          <span class="box" style="float:right;">Blah</span><br>
          <span class="box" style="float:left;">Blah</span>
          <span class="box">Blah</span>
          <span class="box">Blah</span>
    </div>
    <div class="footr">Footer</div>
    </center>
    </body
</html>

    正如你可能会说的，这解决了我几乎所有的问题，除了2/3（我原来的Q中没有提到：

    1. 整个块的垂直对齐使其垂直居中
    2. 在一条水平行上，我希望这些跨度能够粘在外部div的外边缘上，内部div在它们之间均匀分布。
    3. 在行距小于n的行上，我会让它们在前一行的前3个跨度下排成一行。

      4. 我正在做这个练习，仅仅是为了我个人的“痒痒，我只是要划伤”，并且在我自己的时间。为了工作，我已经完成了大部分工作（谨慎地）使用表格来正确排列。

      PS：请原谅一些格式错误的HTML和内联样式等。一旦我获得100％正常工作的解决方案，我将清理它。

6 个答案:

答案 0 :(得分：2)

最好将表格用于表格数据。请注意Divitis问题。

更新：如果这些“框”是指向其他地方的链接，那么只需使用锚点实现它们并对其进行适当的样式设置。一种名为image replacement的技术可以帮助您。关于如何布置这些链接，请查看listamatic horizontal lists。

答案 1 :(得分：1)

如果这适合你，请尝试：

<html>
    <head>
        <title>box test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="boxContainer">
            <span class="box">1</span>
            <span class="box">2</span>
            <span class="box">3</span>
            <span class="box">4</span>
            <span class="box">5</span>
            <span class="box">6</span>
            <span class="box">7</span>
            <span class="box">8</span>
            <span class="box">9</span>
            <span class="box">a longer block</span>
            <span class="box">a longer multi <br/> lined<br/> block</span>
            <span class="box">12</span>
            <span class="box">13</span>
            <span class="box">14</span>
            <span class="box">15</span>
            <span class="box">16</span>
            <span class="box">17</span>
            <span class="box">18</span>
            <span class="box">19</span>
            <span class="box">20</span>         
        </div>
    </body>
</html>

#boxContainer{
    text-align: center;

    background-color: #D0DC16;
    border: 1px solid black;
    height: 100%;
    padding: 1em 0 1em 0;
    width: 100%;
}
.box{
    /*width: 24%;*/
    display: inline-block;

    padding: 2em;
    margin: 0.5em 0 0.5em 0;
    background-color: #DC6216;
    border: 1px solid black;
}

您可以将.box widht更改为（100 / n）-1。 我不知道为什么-1，但它可能与边距和边界没有计入宽度以及单个像素不能分成子像素的事实有关。

- EDIT--
评论后评论代码。 评估/解除每行自贴/固定数量框的宽度线。
添加了两个不规则的盒子。

答案 2 :(得分：1)

  

问题：[你怎么样] / [有吗？   没有使用的任何方式]   表？

只需给它们一个固定的宽度并将它们浮到左边。 （如果它们没有设定的宽度，这是不够的。）

答案 3 :(得分：1)

您可以尝试display:inline-block;。这将满足扩大承包条件的所有条件。

教程在这里：display:inline-block; tutorial

示例用法在此处：display:inline-block; example

答案 4 :(得分：0)

这就是我想出来的。您可能必须使用宽度来调整浏览器舍入错误/空白区域更正，但整体应该有效。 IE也可能需要明智地使用overflow：hidden | auto。 

<!DOCTYPE html>
<html><head><style type="text/css">

.container { width: 100%;text-align: center;}
.ib { min-width: 150px; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline;}
.ib .styleMe { display: block; background: green; margin: 5px; text-align:left; border: 2px solid black; padding: 0 8px; }
.n1 .ib { width: 100%; } /* you could also use max-width here (if you can ignore IE6) and want jagged lines of items */
.n2 .ib { width: 50%; }
.n3 .ib { width: 33%; }
.n4 .ib { width: 25%; }
.n5 .ib { width: 20%; }
.n6 .ib { width: 16%; }
/*.nX .ib { max-width: 100/X; } may need to account for white-space/browser rounding errors too! */

</style></head>
<body>

<div class="container n4">
    <div class="ib"><div class="styleMe">
        <p>One</p>
        <p>Line 2</p>
    </div></div><!--
    kill whitespace (or adjusts widths above)
    --><div class="ib"><div class="styleMe">
        <p>Two</p>
        <p>Line 2</p>
    </div></div><!--
    kill whitespace (or adjusts widths above)
    --><div class="ib"><div class="styleMe">
        <p>Three</p>
        <p>Line 2</p>
    </div></div><!--
    kill whitespace (or adjusts widths above)
    --><div class="ib"><div class="styleMe">
        <p>Four</p>
        <p>Line 2</p>
    </div></div><!--
    kill whitespace (or adjusts widths above)
    --><div class="ib"><div class="styleMe">
        <p>Five</p>
        <p>Line 2</p>
    </div></div><!--
    kill whitespace (or adjusts widths above)
    --><div class="ib"><div class="styleMe">
        <p>Six</p>
        <p>Line 2</p>
    </div></div>
</div>
</body></html>

答案 5 :(得分：-1)

将你的div变成内联元素并给它们一个固定的宽度：

<html>
<head><title>Column test</title></head>
<style>
.box {
        width: 60px;
        height: 20px;
        border: 1px solid black;
        display: inline;
        margin: 3px;
}
.center {
        text-align: center;
        border: 1px solid green;
}
</style>
<body>
<div class="center">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
</div>
</body>
</html>

这将像普通文本一样将它们放在彼此之后。只要没有更多元素适合当前行，它们就会启动一个新元素。

您需要固定宽度，因为默认宽度为100％。如果有可能说“宽度适合内容”会很好，但这不起作用，因为div的内容需要div的宽度来布局自己（母鸡和蛋问题）。

相关问题
最新问题