表结构到css div [英] table structure to css divs

问题描述

我真的需要帮助将这个简单的表结构转换为css div的。有一个简单的应用程序或东西。 CSS divs正在驱使我疯了。

I really need help converting this simple table structure to css div's. Is there a simple application or something. CSS divs are driving me insane.

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

推荐答案

测试：

编辑： 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>

这篇关于表结构到css div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！