Question

我在subdiv内有div maindiv。我想将sub div分成多行和多列，如下所示。

如何划分subdiv如下

enter image description here

Answer 1

你可以做这样的事情

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>

Answer 2

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

Answer 3

我知道问题已经回答，但是还有另一种方法可以解决。

您可以使用CSS网格实现它。 read more about css grid

.grid { 
    display: grid;
    grid-template-columns: 10rem 7rem 7rem 7rem;
    grid-template-rows: 7rem 7rem;
    grid-template-areas: 
    "s1 s2 s3"
    "s1 s2 s4"
}
.s1 { 
    grid-area: s1;
    background-color: #FF0000;
}
.s2 { 
    grid-area: s2;
    background-color: #00FF36;
}
.s3 { 
    grid-area: s3;
    background-color: #0030FF;
}
.s4 {
    grid-area: s4;
    background-color: #FF00E4;
}

 <div class="grid">
      <div class="g s1"></div>
      <div class="g s2"></div>
      <div class="g s3"></div>
      <div class="g s4"></div>
 </div>

如何在div中将div拆分成多行和多列？

3 个答案: