there is an office requirement:
is like a table, and the cell size is fixed. If the degree of a row is not the same, the extra cells will automatically run, but at the same time, the cells of each row need to be evenly allocated the size of a row.
this is the effect of writing in js, explain how to use only css3 to achieve the same effect.
codepen connection (you need to manually resize the window to see the effect):
https://codepen.io/darcrand/f.
2018-08-12 excuse me:
I appreciate your answers very much. Maybe mine didn"t describe the problem clearly. Let"s check the code below:
dom section
<div class="box">
<div class="cell">
<div class="content">A</div>
</div>
<div class="cell">
<div class="content">B</div>
</div>
<div class="cell">
<div class="content">C</div>
</div>
<div class="cell">
<div class="content">D</div>
</div>
<div class="cell">
<div class="content">E</div>
</div>
<div class="cell">
<div class="content">F</div>
</div>
<div class="cell">
<div class="content">G</div>
</div>
<div class="cell">
<div class="content">H</div>
</div>
<div class="cell">
<div class="content">I</div>
</div>
<div class="cell">
<div class="content">J</div>
</div>
<div class="cell">
<div class="content">K</div>
</div>
<div class="cell">
<div class="content">L</div>
</div>
</div>css section
.box {
display: flex;
flex-wrap: wrap;
border: 1px solid -sharp000;
box-sizing: border-box;
}
.content {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
margin: 20px auto;
font-size: 32px;
font-weight: bold;
background-color: rgb(37, 180, 144);
}js section
const cells = document.querySelectorAll(".cell")
function getStyle(ele) {
return ele.currentStyle ? ele.currentStyle : window.getComputedStyle(ele, null)
}
function resize() {
const boxWidth = parseInt(getStyle(document.querySelector(".box")).width, 10)
const padding = 10
const cellMinWidth =
parseInt(getStyle(document.querySelector(".content")).width, 10) + 2 * padding
const eachLineCount = Math.floor(boxWidth / cellMinWidth)
const percent = Math.floor(100 / eachLineCount * 100) / 100
cells.forEach(ele => {
ele.style.width = `${percent}%`
})
}
resize()
window.addEventListener("resize", resize) first of all, I have used flex . Secondly, when I use justify-content: center , there will be a problem: when the number of cells in the last line is smaller than that of other lines, the position of the cells in the last line will be different from that of other lines.