我已经"提高"了我的编码技巧，这要归功于几天的互联网。但是有时候，我仍然遇到一些问题。从基地上讲，我得到了文字，在我得到按钮的文字下。当然，有些段落比其他段落更长。因此，当我调整窗口大小时，一些按钮将比其他按钮要低。当它移动得太低时，坏事就会发生。看看我的代码以获得更好的理解：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<a href="indexdutch.html"><button id="headerbutton-language-dutch">Nederlands</button></a>
<a href="index.html"><button id="headerbutton-language-english">English</button></a>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="images/galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="planets">
<div class="planettext">
Planets
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mercury.png"> <br>
<p>Mercury is the smallest and innermost planet in the Solar System.
Its orbital period around the Sun of 88 days is the shortest of
all the planets in the Solar System. It is named after the Roman
deity Mercury.</p>
<a href=""><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/earth.png"> <br>
<p>Earth, known as the World or the Globe, is the third planet from the Sun
and the only object in the Universe known to harbor life. It is the densest
planet in the Solar System and the largest of the four terrestrial planets.</p>
<a href="#" id="button"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/venus.png"> <br>
<p>Venus is the second planet from the Sun, orbiting it every 224.7 Earth days.
It has the longest rotation period (243 days) of any planet in the Solar
System and rotates in the opposite direction to most other planets.</p>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/mars.png"> <br>
<p>Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System.
Named after the Roman god of war, it is often referred to as the "Red Planet" because the
iron oxide prevalent gives it a reddish appearance.</p>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mars</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/jupiter.png"><br>
<p>Jupiter is the fifth planet from the Sun and the largest in the Solar System. It's a giant planet
with a mass one-thousandth that of the Sun, but two and a half times that of all the other planets
in the Solar System.</p>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/saturn.png"><br>
<p>Saturn is the sixth planet from the Sun and the second-largest in the Solar System.
It is a gas giant with an average radius about nine times that of Earth.
Saturn is named after the Roman god of agriculture</p>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/uranus.png"><br>
<p>Uranus is the seventh planet from the Sun. It has the third-largest planetary radius
and fourth-largest planetary mass in the Solar System. It is the coldest planetary atmosphere
in the Solar System.</p>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="images/neptune.png"><br>
<p>Neptune is the eighth and farthest known planet from the Sun in the Solar System.
Neptune is 17 times the mass of Earth. Neptune orbits the Sun once every 164.8
years at an average distance of 30.1 astronomical units.</p>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hr class="style-one">
<div class="plutotext">
Pluto
</div>
<img src="images/pluto.png"> <br>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button></a>
<hr class="style-one">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/javascript.js"></script>
</body>
</html>
CSS：
html {
margin: 0;
}
body {
background: #DCDCDC;
width: 100%;
margin: 0;
}
.carousel-control.left, .carousel-control.right {
background-image: none;
width: 10%;
}
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
position: relative;
}
.bannertext h1 {
font-size: 2em;
}
#headerbutton-language-english {
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 110px;
text-align: center;
border: white 2px solid ;
line-height: 40px;
position: absolute;
right: 50px;
bottom: 0px;
}
#headerbutton-language-dutch {
font-weight: bold;
-webkit-border-radius: 5px;
color: white;
background-color: #778899;
width: 110px;
text-align: center;
border: white 2px solid ;
line-height: 40px;
position: absolute;
right: -100px;
bottom: 0px;
}
.planettext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 200px;
margin-bottom: 30px;
width: 100%;
background-color: #DCDCDC;
font-weight: bold;
}
.planets {
font-size: 2em;
padding: 0px 0 0 0;
width: 100%;
text-align: center;
color: black;
}
.planets img {
height: 300px;
max-width: none;
margin-bottom: 20px;
margin-bottom: 30px;
}
.planets button {
margin-bottom: 30px;
}
.plutotext {
text-align: center;
font-size: 1.5em;
color: #000;
margin-top: 100px;
margin-bottom: 30px;
width: 100%;
font-weight: bold;
margin: 00;
}
@media all and (max-width: 960px) {
#headerbutton-language-dutch { display: none; }
#headerbutton-language-english { display: none; }
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
(我知道这里和那里有一些错误，对此我是新手。我尝试对按钮设置一个小小的高度。它有效，但看起来一点也不好。我想要的是3个(或2个按钮，取决于窗口大小(，将其设置为与当时最长段落的高度相同的高度。有人愿意对我说某种感觉并帮助我弄清楚这一点吗？预先感谢。
好吧，我想我有一些可以起作用的东西。我鼓励您了解Flexbox。这是一个非常强大的工具！以下是我对您的CSS进行的调整：
.planets {
font-size: 2em;
padding: 0px 0 0 0;
width: 100%;
text-align: center;
color: black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.planets .col-lg-4 a{
height: 48px;
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
display: block;
}
.planets .col-lg-4{
padding-bottom: 48px;
}
我只是将Flexbox属性添加到已经存在的.planet样式中。此外，我为包含您的按钮和.col-lg-4 <div>元素的<a>添加了样式。最后，我确实删除了<button>元素的保证底。在此处查看它：https：//jsfiddle.net/qrc05fsk/