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

Question

我希望能夠將盒子的尺寸設置成我嘗試過的所有尺寸，但似乎不起作用。 有人對此有任何意見嗎？ 我想我可能做錯了。

我希望能夠將盒子的尺寸設置成我嘗試過的所有尺寸，但似乎不起作用。 有人對此有任何意見嗎？ 我想我可能做錯了。

 #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

只需添加此

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