如何使这些盒子的尺寸相同？

Question

I want to be able to make the boxes the same size i've tried to everything but it doesnt seem to be working. Anyone have any input on this? i think i maybe doing something wrong.

I want to be able to make the boxes the same size i've tried to everything but it doesnt seem to be working. Anyone have any input on this? i think i maybe doing something wrong.

 #wrap{ width: 90%; max-width: 1100px; margin: 50px auto; } .columns_2 figure{ width:49%; margin-right:1%; } .columns_2 figure:nth-child(2){ margin-right: 0; } .columns_3 figure{ width:32%; margin-right:1%; } .columns_3 figure:nth-child(3){ margin-right: 0; } .columns_4 figure{ width:24%; margin-right:1%; } .columns_4 figure:nth-child(4){ margin-right: 0; } .columns_5 figure{ width:19%; margin-right:1%; } .columns_5 figure:nth-child(5){ margin-right: 0; } #columns figure:hover{ -webkit-transform: scale(1.1); -moz-transform:scale(1.1); transform: scale(1.1); } #columns:hover figure:not(:hover) { opacity: 0.4; } div#columns figure { display: inline-block; background: #FEFEFE; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); margin: 0 0px 15px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 15px; padding-bottom: 5px; background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } div#columns figure img { width: 100%; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 5px; } div#columns figure figcaption { font-size: 18px; color: #444; line-height: 1.5; height:30px; font-weight:600; text-overflow:ellipsis; font-family: 'Abel', sans-serif; } figure > p { font-size:16px; text-align: justify; padding-top:1px; font-family: 'Abel', sans-serif; } @media screen and (max-width: 960px) { #columns figure { width: 24%; } } @media screen and (max-width: 767px) { #columns figure { width:32%;} } @media screen and (max-width: 600px) { #columns figure { width: 49%;} } @media screen and (max-width: 500px) { #columns figure { width: 100%;} } 

  <div id="wrap"> <div id="columns" class="columns_4"> <figure> <img src="img/gallery/micro.png"> <figcaption>Microblading</figcaption> <p>This technique will give you the most natural result possible. Hair like strokes are created to follow the natural hair pattern in your own eyebrows. This is the latest technique in the Permanent Cosmetics industry. This technique is also referred to as 3D Eyebrows or Eyebrow Cloning. This fee includes (1) one follow up touch-up within 3 months of the initial service visit.</p> <span class="price">$565.00</span> </figure> <figure> <img src="img/gallery/microshading.png"> <figcaption>MICROBLADING WITH SHADING</figcaption> <p>This technique also gives you a very natural result. Hair like strokes are created to follow the natural growth pattern of your own eyebrows. As a finishing touch, color is also tapped softly into the skin to add dimension and density. This fee includes (1) one follow up touch-up within 3 months of the initial service visit.</p> <span class="price">$625.00</span> </figure> <figure> <img src="img/gallery/scalp.png"> <figcaption>SCALP MICROPIGMENTATION</figcaption> <p>This procedure is ideal for clients that have permanent hairloss due to scar tissue, alopecia or receding hair lines. A natural look is achieved by creating hair like strokes or hair like follicle replication along the desired area.</p> <span class="price">Prices May Vary</span> </figure> <figure> <img src="img/gallery/eyebrow.png"> <figcaption>SOLID PERMANENT EYEBROWS</figcaption> <p>This procedure is ideal for clients who wish to have a more defined, solid shape. Your ideal eyebrow shape and style is created and filled in solid with a color that best compliments you. This fee includes (1) one follow up touch-up within 6 months of initial service visit.</p> <span class="price">$385.00</span> </figure> 

Answer 1

Just add this

#columns{
   display: flex;
   flex-wrap: wrap;
}