为什么我的内嵌块div不对齐？

Question

这是我的HTML：

 .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF202; background-image: url(img/logos/logoSmall10.png); background-size: contain; background-repeat: no-repeat; background-position: center; } .classTitle { text-align: center; font-family: bebaslight; margin-bottom: 0px } .classInd p { font-family: bebaslight; font-size: 13px; margin: 5px; } .line { border-top: .25px solid black; width: 75%; margin: 0 auto; } 

 <div class="classWrap"> <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> <div class="classInd"> <h3 class="classTitle">Body Sculpting</h3> <div class="line"></div> <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Blitz</h3> <div class="line"></div> <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> </div> <div class="classInd"> <h3 class="classTitle">Intro Training</h3> <div class="line"></div> <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> </div> <div class="classInd"> <h3 class="classTitle">Circuit Training</h3> <div class="line"></div> <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> </div> <div class="classInd"> <h3 class="classTitle">HIIT Abs</h3> <div class="line"></div> <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> </div> <div class="classInd"> <h3 class="classTitle">MX Cardio</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">MX Strength</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">Boot Camp</h3> <div class="line"></div> <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Endurance</h3> <div class="line"></div> <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> </div> </div> 

我尝试将vertical-align：top添加到类“ classWrap”中，因为它已解决了类似的问题，并且是其他帖子的建议，但没有用。 有些被推高，有些被推低。

Answer 1

您需要在.classInd规则中添加vertical-align:top 。

 .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF202; background-image: url(img/logos/logoSmall10.png); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align:top; } .classTitle { text-align: center; font-family: bebaslight; margin-bottom: 0px } .classInd p { font-family: bebaslight; font-size: 13px; margin: 5px; } .line { border-top: .25px solid black; width: 75%; margin: 0 auto; } 

 <div class="classWrap"> <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> <div class="classInd"> <h3 class="classTitle">Body Sculpting</h3> <div class="line"></div> <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Blitz</h3> <div class="line"></div> <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> </div> <div class="classInd"> <h3 class="classTitle">Intro Training</h3> <div class="line"></div> <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> </div> <div class="classInd"> <h3 class="classTitle">Circuit Training</h3> <div class="line"></div> <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> </div> <div class="classInd"> <h3 class="classTitle">HIIT Abs</h3> <div class="line"></div> <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> </div> <div class="classInd"> <h3 class="classTitle">MX Cardio</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">MX Strength</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">Boot Camp</h3> <div class="line"></div> <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Endurance</h3> <div class="line"></div> <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> </div> </div> 

Answer 2

vertical-align: top;的问题vertical-align: top; 声明是您将其应用于容器而不是子元素。 它应该在.classInd选择器上设置。

 .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF202; background-image: url(img/logos/logoSmall10.png); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: top; } .classTitle { text-align: center; font-family: bebaslight; margin-bottom: 0px } .classInd p { font-family: bebaslight; font-size: 13px; margin: 5px; } .line { border-top: .25px solid black; width: 75%; margin: 0 auto; } 

 <div class="classWrap"> <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> <div class="classInd"> <h3 class="classTitle">Body Sculpting</h3> <div class="line"></div> <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Blitz</h3> <div class="line"></div> <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> </div> <div class="classInd"> <h3 class="classTitle">Intro Training</h3> <div class="line"></div> <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> </div> <div class="classInd"> <h3 class="classTitle">Circuit Training</h3> <div class="line"></div> <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> </div> <div class="classInd"> <h3 class="classTitle">HIIT Abs</h3> <div class="line"></div> <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> </div> <div class="classInd"> <h3 class="classTitle">MX Cardio</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">MX Strength</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">Boot Camp</h3> <div class="line"></div> <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Endurance</h3> <div class="line"></div> <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> </div> </div> 

Answer 3

我建议不要为类“ classInd”定义高度和宽度属性，而应为类“ classWrap”定义这些属性。 对于类“ classInd”，您可以将高度和宽度设置为100％。 希望这会帮助你。

Answer 4

您可以尝试添加以下内容：

.classInd:nth-of-type(even) {
float: right;
}

.classInd:nth-of-type(odd) {
float: left;
}

 .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF202; background-image: url(img/logos/logoSmall10.png); background-size: contain; background-repeat: no-repeat; background-position: center; } .classInd:nth-of-type(even) { float: right; } .classInd:nth-of-type(odd) { float: left; } .classTitle { text-align: center; font-family: bebaslight; margin-bottom: 0px } .classInd p { font-family: bebaslight; font-size: 13px; margin: 5px; } .line { border-top: .25px solid black; width: 75%; margin: 0 auto; } 

 <div class="classWrap"> <h1 style="text-align:center;font-family:bebaslight;font-size:50px">Group Classes</h1> <div class="classInd"> <h3 class="classTitle">Body Sculpting</h3> <div class="line"></div> <p>Chisel those hard-to-train areas and experience unprecedented results. Work your upper and lower and upper body, strengthen the sides of your waist and lower back and change the way you think about fitness.</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Blitz</h3> <div class="line"></div> <p>On busy days, the 30 minute blitz is the best way to squeeze in optimal calorie burn. We dare you to make this class your warm up!</p> </div> <div class="classInd"> <h3 class="classTitle">Intro Training</h3> <div class="line"></div> <p>CLearn the basics in an exciting and uplifting atmosphere. Our certified trainers will take you through all of the fundamental iRock exercises, teach you how to use the TRX Suspension Trainer, and prepare you for workouts that will change your life!</p> </div> <div class="classInd"> <h3 class="classTitle">Circuit Training</h3> <div class="line"></div> <p>Bored of the same old workout routine? This class is for you! Blast fat, sculpt muscle, and burn up to 10 calories per minute as you move through exercises you can find only at iRock Fitness in Erie, PA.</p> </div> <div class="classInd"> <h3 class="classTitle">HIIT Abs</h3> <div class="line"></div> <p>Keep your heart pumping with this amazing high intensity workout that fuses serious conditioning for those all-important core muscle groups.</p> </div> <div class="classInd"> <h3 class="classTitle">MX Cardio</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">MX Strength</h3> <div class="line"></div> <p></p> </div> <div class="classInd"> <h3 class="classTitle">Boot Camp</h3> <div class="line"></div> <p>And now, the results you've been waiting for. Kick it into high gear with this high intensity circuit. Come ready to sweat!</p> </div> <div class="classInd"> <h3 class="classTitle">Cardio Endurance</h3> <div class="line"></div> <p>Reach maximum heart rate levels as you pedal, step, jump and row your way to your fitness and weight loss goals.</p> </div> </div>