Question

我真的需要帮助将这个简单的表结构转换为css div。是否有简单的应用程序或其他东西。 CSS divs让我疯狂。

<table width="100%" border="0">
  <tr>
<td colspan="3" id="Header"></td>
 </tr>
<tr>
<td width="20%" id="Nav2"></td>
<td width="40%" id="ContentMiddleLeft"></td>
<td width="40%" id="ContentMiddleRight"></td>
 </tr>
<tr>
<td colspan="3" id="BottomContent"></td>
</tr>
</table>

Answer 1

测试一下：

编辑：http://jsfiddle.net/DCbgg/

<style type="text/css" media="screen">
    .container {
        width: 100%;
    }
    .left20 {
        width: 20%;
        float: left;
        background: red;
    }
    .left40 {
        width: 40%;
        float: left;
        background: green;
    }
    .clear {
        clear: both;
    }
</style>

<div class="container">
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
<div class="clear"></div>
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
</div>
<div class="clear"></div>

Answer 2

First Things First

从table更改为div布局时，要记住一些非常重要的事情，这些布局通常适用于所有新的学习体验。

不要因为某些事情不起作用而感到沮丧。只是休息一下，看看别的东西，记住它是新的东西，它不会总是第一次工作。在它最终起作用之前，它可能需要许多不同的方法和尝试。你最终会掌握它。
特别是在这种情况下，请记住divs与tables有很大不同，尤其是在将它们用作网站的主要结构部分时。每个背后的思维过程完全不同，可能需要花费很多时间来点击它。因此：
并非所有设计都从table转移到div。有些事情只能通过tables和其他divs来轻松妥善完成。虽然这不是特别的情况之一，但在更改网站结构时必须进行一些设计更改。

话虽如此，我们现在可以正确回答这个问题。

答案

这是我使用divs设置结构的方式：

<div id="wrap">
  <div id="header"></div>

  <div id="content">
    <div id="nav2"></div>
    <div id="content_right"></div>

    <div style="clear: both"></div>
  </div>

  <div id="footer"></div>
</div>

这就是css的意思：

#wrap {
  width: 100%;
}

#header {
  width: 100%;
  height: /* some height value */;
}

#content {
  width: 100%;
  height: /* some height value */;
}

  #nav2 {
    width: 20%;
    float: left;
  }

  #content_right {
    width: 40%;
    float: right;
  }

#footer {
  width: 100%;
  height: /* some height value */;
}

备注

正如我上面所说，tables和divs背后的思考过程有点不同。使用tables，您习惯使用百分比（%）来定义宽度。这有效，并不一定是坏事。它完成了工作并且很容易做到。

但是当你使用divs时，更常见的方法是使用由像素（px）定义的固定宽度。这样可以实现更加恒定的设计，不会在页面上延伸，并且在知道页面总是相同宽度的情况下为您提供更多的设计自由度。

有关固定宽度设计的更多信息，我建议您查看960 grid system。它非常容易理解，并且可以实现清晰，美观的设计，易于构造和风格。

最重要的是，享受divs带来的新发现的自由。他们没有被锁定在任何东西上，并且可以在任何地方做任何事情，在任何地方，看起来像页面上的任何东西。他们能做什么并没有什么限制。我听说他们被称为网页唯一必需的部分（你真的可以设计和创建一个只有divs的输入页面，包含文字）。

享受旅途中的乐趣！

Answer 3

CSS3 Style（使用“display：table;”）：

检查http://jsfiddle.net/reKfe/（jsFiddle来自http://query7.com/exploring-the-power-of-css3）

表结构为css div

3 个答案:

First Things First

答案

备注