<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>
This is how my page looks like when I add some content in the divs.
.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均匀地排列和布置？
答案 0 :(得分：0)
问题不在边缘，而是declare @customer_dist as Table (
[id] [int] NOT NULL,
[First_Name] [varchar](50) NULL,
[Last_Name] [varchar](50) NULL,
[DoB] [date] NULL,
[post_code] [varchar](50) NULL,
[mobile] [varchar](50) NULL,
[Email] [varchar](100) NULL );
INSERT INTO @customer_dist (id, First_Name, Last_Name, DoB, post_code, mobile, Email)
VALUES ('32006455', 'Mary', 'Wilson', '1983-09-20', 'BT62JA', '07706212920', 'nastie220@yahoo.com'),
('35963960', 'Mary', 'Wilson', '1983-09-20', 'BT62JA', '07484863324', 'nastie@hotmail.com'),
('38627975', 'Mary', 'Wilson', '1983-09-20', 'BT62JA', '07484863478', 'nastie2001@yahoo.com'),
('46653041', 'Mary', 'WILSON', '1983-09-20', 'BT62JA', '07483888179', 'nastie2010@yahoo.com'),
('48023677', 'Mary', 'Wilson', '1983-09-20', 'BT62JA', '07483888179', 'nastie@hotmail.com'),
('49560434', 'Mary', 'Wilson', '1983-09-20', 'BT62JA', '07849727199', 'nastie@hotmail.com'),
('49861032', 'Mary', 'WILSON', '1983-09-20', 'BT62JA', '07849727199', 'nastie2001@yahoo.com'),
('53130969', 'Mary', 'Wilson', '1983-09-20', 'BT62JA', '07849727199', 'Nastie@hotmail.cm'),
('33843283', 'Mary', 'Wilson', '1983-09-20', 'BT148HU', '07484863478', 'nastie2010@yahoo.co.uk'),
('38627975', 'Mary', 'Wilson', '1983-09-20', 'BT62JA', '07484863478', 'nastie2001@yahoo.com')
SELECT * FROM @customer_dist;
元素的垂直对齐。
您应该将其添加到样式中：
public static String getDeviceDensityString(Context context) {
switch (context.getResources().getDisplayMetrics().densityDpi) {
case DisplayMetrics.DENSITY_LOW:
return "ldpi";
case DisplayMetrics.DENSITY_MEDIUM:
return "mdpi";
case DisplayMetrics.DENSITY_TV:
case DisplayMetrics.DENSITY_HIGH:
return "hdpi";
case DisplayMetrics.DENSITY_260:
case DisplayMetrics.DENSITY_280:
case DisplayMetrics.DENSITY_300:
case DisplayMetrics.DENSITY_XHIGH:
return "xhdpi";
case DisplayMetrics.DENSITY_340:
case DisplayMetrics.DENSITY_360:
case DisplayMetrics.DENSITY_400:
case DisplayMetrics.DENSITY_420:
case DisplayMetrics.DENSITY_440:
case DisplayMetrics.DENSITY_XXHIGH:
return "xxhdpi";
case DisplayMetrics.DENSITY_560:
case DisplayMetrics.DENSITY_XXXHIGH:
return "xxxhdpi";
}
}
取决于确切的垂直放置方式，可以将其更改为<div>。有关详细信息，请参见CSS规范。
（请注意，默认值为.block { vertical-align: top }
，它将每个框中的最后一行文本的底部与其相邻的文本对齐。）
答案 1 :(得分：0)
类别为.block的元素已应用display: inline-block。内联块的默认垂直对齐方式为baseline（即，块中的最后文本行已对齐）
因此，只需将vertical-align: top类的.block添加到CSS即可将其内容强制置于顶部并根据需要对齐它们。