div列布局 [英] div column layout

问题描述

我试图在div中创建下面的结构，但我只需要一些帮助就可以获得css的startet。

宽度需要100％

div class =h2_lin>解决方案

 < style type =text / css> 
 .clear {clear：both; } 
 .top {width：100％; } 
 .col {width：25％;向左飘浮; } 
 .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> 
  

如果您将边框/填充/边距添加到列，则这不起作用，如果使用absolue宽度值if你想使用它。

Hi Im trying to create the following structure in div's, but I just need some help getting startet with the css.

The width needs to be 100%

解决方案

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

This will not work if you add border/padding/margin to the columns, use absolue width values if you want to use that.

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