我已经＆＃34;改进＆＃34;几天来感谢互联网的编码技巧。但有时，我仍遇到一些问题。基本上，我得到了文字，在文字下我有按钮。当然，有些段落比其他段落长。因此，当我调整窗口大小时，某些按钮将比其他按钮移动得更低。当它移动得太低时，就会发生坏事。看看我的代码以便更好地理解：
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;
}
}
（我知道这里和那里都有一些错误，我对此不熟悉，抱歉。）但我确实理解为什么会发生这种情况，因为按钮和段落在同一个div中。我尝试在按钮上设置最小高度。它有效，但它看起来并不好看。我想要的是3（或2个按钮，取决于窗口大小）设置在与当时最长段落相同的高度。有人愿意对我说些什么并帮我解决这个问题吗？提前谢谢。
答案 0 :(得分：0)
好的，我认为我有一些可行的方法。我鼓励您了解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样式中。另外，我为包含按钮的<a>和.col-lg-4 <div>元素添加了样式。最后，我确实删除了<button>元素的margin-bottom。在此处查看此操作：https://jsfiddle.net/qrc05fsk/