设置div高度等于动态宽度

项目中有时候会遇到这个问题：一行有3个div，希望这3个div平分屏幕宽度，并且高度等于宽度。
第一个问题：平分屏幕宽度
可以对div设置百分比宽度，而不是直接用px宽度，这里用到了响应式设计的思想，可以参考这篇文章：自适应网页设计（Responsive Web Design）
第二个问题：动态设置高度和宽度一致
有两种方法，一种是用js动态设置，一种是直接用CSS设置
先看下html代码

<ul>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
    <li class="container">
        <div class="dummy">
        </div>
        <div class="element">
            some text
        </div>
    </li>
</ul>

公用的CSS

ul,li{
            list-style: none;
        }
        * {
            margin: 0;