添加内容时，行内div元素未垂直对齐
[英]inline-block div elements not vertically aligned when content is added
问题描述
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<link rel="stylesheet" href="Team.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Karla|Montserrat" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/textition.js"></script>
<link rel="stylesheet" href="SparkHome.css">
<link rel="stylesheet"href="Event.css">
<script type="text/javascript">
</script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="mainWrapper">
<div class="main">
<nav class="navbar navbar-expand-lg navbar-dark" id="navbar">
<a class="navbar-brand ml-0">
<h1 style="
font-size:40px;
color: white;
" class="d-lg-none"> Logo</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav pt-2 pb-2">
<li class="nav-item mt-0" id="navItems">
<a href="SparkHome.html">Home</a>
</li>
<li class="nav-item mt-0" id="navItemsActive">
<a href="#">The Team</a>
</li>
<li class="nav-item mt-0" id="navItems">
The Event
</li>
<li class="nav-item mt-0" id="navItems">
<a href="https://docs.google.com/forms/d/1WpEQ4nF4y-mGUiz2hv1gEH-D58_j0pEWGttdfEhsdqQ/viewform?edit_requested=true" target="-_blank">Volunteer</a>
</li>
<li class="nav-item mt-0" id="navItems">
<a href="https://docs.google.com/forms/d/e/1FAIpQLScC9lS7uMstAmGXrQ41g0uEe3qXmmHHmipvOd1Rzae6LEEB2Q/viewform"target="_blank">Register</a>
</li>
</ul>
</div>
</nav>
<h1 class="heading">The Event</h1>
<hr class="headingHR">
<div class="block">
<h1 class="eventTitle">
Cubing
</h1>
<p class="eventContent">
The real reason behind the creation of this organisation. We founder members are passionate cubers, in need of a platform to learn and show our skills. This thirst created our organisation.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Surprise
</h1>
<p class="eventContent">Do you think that we'll tell you right now? Be there to witness the excitement.<br>EXPECT THE UNEXPECTED </p>
</div>
<div class="block">
<h1 class="eventTitle">
Logic Solving
</h1><p class="eventContent">
This event consists of 2 rounds. The first is a paper-based round that tests your logic and decision-making skills. The second is an actual, physical puzzle.
</div>
<br>
<div class="block">
<h1 class="eventTitle">
Horcrux Hunt
</h1>
<p class="eventContent"> In its first ever appearance at SPARK, participate in The Horcrux Hunt, scavenging for treasure items stowed away in the campus grounds.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
Fortnite
</h1>
<p class="eventContent">
With a staggering 125 million active players, Fortnite is THE hottest game on the market right now.
</p>
</div>
<div class="block">
<h1 class="eventTitle">
MCU event
</h1>
</div>
</div>
</body>
</html>
.block {
margin-top: 50px;
height:300px;
margin-left: 30px;
width: 300px;
background-color: transparent;
border:2px solid white;
padding: 10px;
display: inline-block;
text-align: center;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-delay: 1s;
animation-fill-mode: forwards;
border-radius:20px;
margin-bottom: 50px;
}
.main {
text-align: center!important;
}
@media only screen and (max-width: 600px) {
.block {
height: 300px;
width: 300px;
margin-left:0;
margin-right: 0;
margin-top: 30px;
}
}
.eventTitle {
font-family: 'Montserrat',sans-serif;
margin-top: 20px;
color: white;
font-size: 25px;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.eventContent {
color: white;
margin-top:10px;
font-family: 'Montserrat',sans-serif;
font-size: 17px;
}
如果.block类中没有内容，则div均匀排列和间隔。 但是，当我添加内容（ .eventContent类）时，div（ .block ）变成了麻烦。 它们设置为display:inline-block 。 我如何才能使具有内容的div均匀地排列和排列？
2 个解决方案
解决方案1
0 2018-08-22 14:21:00
问题不在边缘，而是<div>元素的垂直对齐。
您应该将此添加到样式中：
.block { vertical-align: top }
根据您希望垂直放置的确切工作方式，可以将其更改为vertical-align: text-top 。 有关详细信息，请参见CSS规范。 （请注意，默认值是vertical-align: baseline ，它使每个框中的最后一行文本的底部与其相邻文本对齐）。
解决方案2
0 2018-08-22 22:28:34
具有.block类的元素将display: inline-block应用于它们。 内联块的默认垂直对齐方式是baseline （即，块中的最后文本行已对齐）
因此，只需在.block类的CSS上添加vertical-align: top以将其内容强制到顶部并根据需要对齐它们。
为什么这个内联块元素的内容不是垂直对齐的
[英]Why does this inline-block element have content that is not vertically aligned
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.