项目中有时候会遇到这个问题:一行有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;