Cannot integrate these 2 columns, with the sub-columns :
I am forced to use this structure :
<div >
<div >col1</div>
<div >col2</div>
<div >col 2.1</div>
<div >col 2.2</div>
<div>
CodePudding user response：
use CSS grid instead
the simplest way to do this is using CSS grid (and is also repsonsive)
...this css property grid-column
that is a shorthand for grid-column-start and grid-column-end
details: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
using the Firefox DevTools I click the grid button in the code, which makes appear me a grid visualizer...
in the paper, I start thinking about... and I find that the best way is creating a 4 columns grid-based.
here is the code if you want to learn it :)
body {
display: grid;
place-content: center;
height: 100vh;
}
.container {
display: grid;
gap: 0.5em;
height: 80vh;
width: 80vw;
}
.container .child {
background: lightblue;
display: grid;
place-content: center;
}
.child1 {
grid-column: 1/2;
grid-row: 1/3;
}
.child2 {
grid-column: 2/4;
}
.child3 {
grid-column: 2/3;
}
.child4 {
grid-column: 3/4;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div >
<div >col1</div>
<div >col2</div>
<div >col 2.1</div>
<div >col 2.2</div>
</div>
</body>
</html>CodePudding user response：
With Flexbox
.classes_container{
background: whitesmoke;
position: relative;
width: 100%;
height: 300px;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 20px auto;
display: flex;
}
.item{
background: #d3f9d2;
padding: 5px;
margin: 5px;
text-align: center;
line-height: 200px;
font-weight: bold;
}
.col1{
width: 60%;
height: 95%
}
.col2{
width: 40%;
height: 50%;
}
.col2_1{
width: 18%;
height: 39%;
margin-right: 10px;
}
.col2_2{
width: 18%;
height: 39%;
margin-left: 10px;
}
.col2_1 {
align-self: end;
position: absolute;
right: 19%;
}
.col2_2 {
align-self: end;
position: absolute;
right: 1px;
}<div >
<div >col1</div>
<div >col2</div>
<div >col 2.1</div>
<div >col 2.2</div>
<div>
</div>