div列布局

gul*_*aek 0 html css

嗨我试图在div中创建以下结构,但我只是需要一些帮助获得与CSS的startet.

替代文字

宽度需要100%

Lek*_*eyn 6

<style type="text/css">
.clear{ clear: both; }
.top{ width: 100%; }
.col{ width: 25%; float: left; }
.col, .top{ text-align: center; }
</style>
<div class="main">
   <div class="top clear">Menu</div>
   <div class="col">Column1</div>
   <div class="col">Column2</div>
   <div class="col">Column3</div>
   <div class="col">Column4</div>
   <div class="clear"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

如果向列添加边框/填充/边距,则无效,如果要使用,则使用绝对宽度值.