1

我真的需要帮助将这个简单的表结构转换为 css div。有没有简单的应用程序之类的。CSS div 快把我逼疯了。

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

3 回答 3

2

测试这个：

编辑：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>
于 2012-07-15T00:30:43.943 回答
2

第一件事

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

  1. 不要因为某事不工作而感到沮丧。休息一下，看看别的东西，记住这是新的东西，它并不总是第一次起作用。在它最终起作用之前，可能需要许多不同的方法和尝试。你最终会掌握它的窍门。

  2. 尤其是在这种情况下，请记住它们与divs有很大不同tables，尤其是在将它们用作网站的主要结构部分时。每个背后的思考过程是完全不同的，可能需要很多时间来习惯它才能点击。因为这：

  3. 并非所有设计都从 转移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 网格系统。它非常容易遵循，并导致易于构建和样式的干净、美观的设计。

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

祝您旅途愉快！

于 2012-07-15T00:55:08.710 回答
0

CSS3 样式（使用“display:table;”）：

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

于 2012-07-15T00:38:34.753 回答