如何将一个div分成多个行和列的CSS？

我有div subdiv里面maindiv。我想将子div分成多行和多列，如下所示。如何将一个div分成多个行和列的CSS？

如何划分subdiv如下

enter image description here

2015-04-03 rji rji

应该在 “列” 始终具有相同高度？如果在4个区块中每个区块的内容更长/更短，块会发生什么？他们制作了什么内容：图片和/或文字？编辑：你到目前为止尝试了什么？ – FelipeAls 2015-09-17 10:02:29

你可以做这样的事情

div{ 
 
    display:inline-block; 
 
    float:left; 
 
    color:#fff; 
 
    font-size:40px; 
 
} 
 

 
.one{ 
 
    width:150px; 
 
    height:200px; 
 
    background:red; 
 
} 
 

 
.two{ 
 
    width:100px; 
 
    height:200px; 
 
    background:lightgreen; 
 
} 
 

 
.three{ 
 
    width:100px; 
 
    height:200px; 
 
} 
 

 
.four{ 
 
    width:100px; 
 
    height:100px; 
 
background:darkblue; 
 
} 
 
.five{ 
 
    width:100px; 
 
    height:100px; 
 
background:blue; 
 
}

<div class="one">1</div> 
 
<div class="two">2</div> 
 
<div class="three"> 
 
    <div class="four">4</div> 
 
    <div class="five">5</div> 
 
</div>

来源

2015-04-03 07:32:42 Suresh

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Page Layout Sample Div Based</title> 
     <style> 
      /*Reset CSS*/ 
      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
      big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
      b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, 
      td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 
      time, mark, audio, video {margin: 0; padding: 0; border: 0;font-size: 100%;font: inherit;vertical-align: baseline;} 
      /* HTML5 display-role reset for older browsers */ 
      article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} 
      body{line-height: 1;} 
      ol, ul {list-style: none;} 
      blockquote, q {quotes: none; } 
      blockquote:before, blockquote:after, 
      q:before, q:after{ content: ''; content: none; } 
      table {border-collapse: collapse; border-spacing: 0;} 


      /*Our custom css for this page*/ 
      #container {width:760px;margin:0 auto;} 
      #head { display:block; width:100%; margin:10px 0; clear:both; height:35px;} 
      .subhead1 { width:38%; margin-right:2%; height:35px; background-color:#3CF; float:left; } 
      .subhead2 { width:13%; height:35px; background-color:#3CF; float:left; margin:0 0% 0 2%; } 
      .content { min-height:100px; clear:both; width:100%; background-color: #3CF; margin-top:20px; text-align:center; font-size:30px; padding-top:100px; } 
      #footer { height:35px; background-color:#3CF; margin-top:25px; } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="head"> 
       <div class="subhead1"> 
       </div> 
       <div class="subhead2"> 
       </div> 
       <div class="subhead2"> 
       </div> 
       <div class="subhead2"> 
       </div> 
       <div class="subhead2"> 
       </div> 
      </div> 
      <div class="content"> 
      </div> 
      <div id="footer"> 
      </div> 
      <div class="content" style="height:250px;"> 

      </div> 
     </div> 
    </body> 
</html>

来源

2015-04-03 07:32:26

只需将代码粘贴到文件中并另存为.html，然后运行该页面。 – 2015-04-03 07:33:37

如何将一个div分成多个行和列的CSS？

回答

相关问题