It’s just cross-row and cross-column...
If the table is made, it’s easy...
But, div is a block-level tag, and each div will occupy a row...
Method 1, float up~
The two divs below will go to one line...
<div>
<div style="float:left;">div1</div>
<div style="float:left;">div2</div>
</div>
But this has its limitations... It is necessary to adjust the height...
Although it is much easier to use flot:left to float in a certain direction, if there are multiple divs in a row, the width and height of each div need to be considered in order to be neatly laid out.
Method 2, use flex to merge multiple divs into one line
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div flex demo</title>
<style>
/*使用flex样式，将多个div合并为一行~*/
.mainDiv {
display: flex;
background-color: aquamarine;
}
div {
border: 0.1px solid black;
}
</style>
</head>
<body>
<div class="mainDiv" style="width: 100%;">
<!--left-->
<div style="width:75%;">
<div class="mainDiv" style="height: 100px;">
<div style="width: 33.3%;">div1</div>
<div style="width: 33.3%;">div2</div>
<div style="width: 33.3%;">div3</div>
</div>
<div class="mainDiv" style="height: 100px;">
<div style="width: 50%;">div4</div>
<div style="width: 50%;">div5</div>
</div>
</div>
<!--right-->
<div style="width:25%;height: 200px;">
div6
</div>
</div>
<hr />
</body>
</html>
