我怎样才能让这些盒子大小相同？

Question

我希望能够制作相同尺寸的盒子我已经尝试过所有东西，但它似乎并没有起作用。有人对此有任何意见吗？我想我可能做错了什么。

我希望能够制作相同尺寸的盒子我已经尝试过所有东西，但它似乎并没有起作用。有人对此有任何意见吗？我想我可能做错了什么。

＆＃13;

＆＃13;

#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%;}
}

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需添加此

即可

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