Html 如何在css中将div拆分为多行和多列？

How to split a div into multiple rows and columns in css?

提问by rji rji

I have div subdivinside maindiv. I want to make the sub div into multiple rows and columns as below.

我subdiv里面有 div maindiv。我想将子 div 分成多行和多列，如下所示。

How to divide the subdivas below

如何划分subdiv如下

回答by eirenaios

You can do something like this

你可以做这样的事情

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>

回答by Kareem Dabbeet

I know that the question has been answered but there is another way to do this.

我知道问题已得到解答，但还有另一种方法可以做到这一点。

You can Achieve it using css grid. read more about css grid

您可以使用 css grid 来实现它。阅读有关 css 网格的更多信息

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

回答by Abdul Moiz

just copy paste the code into a file and save as .html, and run the page.

只需将代码复制粘贴到文件中并另存为 .html，然后运行该页面。

/*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;
}

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