这里编码的新手目前正在练习显示和定位。我创建了一个网页，其中有几个 div，所有 div 都包含与下面的编码中所示相同的信息(图像、标题、单行段落)。这些在向下滚动页面时以垂直顺序很好地显示，但是我现在希望将这些 div 并排放置在向下滚动页面的 2 行中，而不是一个在另一个之上。因此，两张图像并排放置，其受人尊敬的信息就位于它们的正下方。我已经尝试过多次来解决这个问题，但我还没有完全理解它，所以有人可以解释一下做到这一点的最佳方法吗？我需要使用网格吗？我将非常感激，因为这是我在学习中最困难的部分。我已在下面包含了所有 HTML 和 CSS 代码:
<!DOCTYPE html>
<html>
<head>
<link href="./stylesheet.css" type="text/css" rel="stylesheet">
<meta charset ="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>
<body>
<div id="container">
<nav class="banner">
<img src="./banner.jpg" alt="banner image of various Moto GP riders racing on track">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contenders</a></li>
<li><a href="#">Manufacturers</a></li>
<li><a href="#">Tech Sec</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
<div class="opening">
<h1>MotoGP World Championship Contenders</h1>
<p>Here are the top Moto GP riders that will be competing for the World Championship in 2018...</p>
</div>
<div class="motogp-contenders">
<div class="marquez">
<img class ="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
<h2 class ="rider-name">Marc Marquez</h2>
<p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
</div>
<div class="dovi">
<img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
<h2 class="rider-name">Andrea Dovizioso</h2>
<p class="rider-desc">So close in 2017!</p>
</div>
<div class="rossi">
<img class="rider-image" src="./rossi.jpg" alt="photo of Valentino Rossi">
<h2 class="rider-name">Valentino Rossi</h2>
<p class="rider-desc">Can he win another title before he retires?</p>
</div>
<div class="vinales">
<img class="rider-image" src="./vinales.jpg" alt="photo of Maverick Vinales">
<h2 class="rider-name">Maverick Vinales</h2>
<p class="rider-desc">Can he be fast at every round and win the champonship?</p>
</div>
<div class="lorenzo">
<img class="rider-image" src="./lorenzo.jpg" alt="photo of Jorge Lorenzo">
<h2 class="rider-name">Jorge Lorenzo</h2>
<p class="rider-desc">JL got used to the Duke at the end of the 2017 season...will he be a title contender this year?</p>
</div>
<div class="pedrosa">
<img class ="rider-image" src="./pedrosa.jpg" alt="photo of Dani Pedrosa">
<h2 class="rider-name">Dani Pedrosa</h2>
<p class="rider-desc">The greatest rider never to win a world title?</p>
</div>
<div class="zarco">
<img class ="rider-image" src="./zarco.jpg" alt="photo of Johann Zarco">
<h2 class="rider-name">Johann Zarco</h2>
<p class="rider-desc">The dark horse?</p>
</div>
</div>
</div>
</body>
</html>
我的 CSS 样式如下:
body {
font-family: "arial";
background-color: black;
margin: 0;
}
#container {
width: 1200px;
margin: auto;
}
.banner img {
width: 100%;
}
.banner ul {
text-align: center;
list-style: none;
}
.banner li {
display: inline-block;
font-size: 18px;
padding: 10px;
background-color: white;
border-radius: 3px;
margin: 0 10px;
}
.banner a{
text-decoration: none;
color: black;
}
.banner li:active {
position: relative;
top: 2px;
}
.opening h1 {
color: white;
text-align: center;
font-family: 'Indie Flower';
font-size: 45px;
}
.opening {
color: white;
text-align: center;
font-size: 18px;
margin-bottom: 40px;
}
.rider-image {
width: 35%;
height: 290px;
margin: auto;
display: block;
border-radius: 50px;
}
.rider-name {
color: white;
text-align: center;
font-family: 'Indie Flower'
}
.rider-desc {
color: white;
text-align: center;
font-size: 16px;
margin-bottom: 40px;
}
最佳答案
这可以通过使用 Bootstrap 库及其内置网格系统轻松完成，如下所示:
但是，如果您不想使用外部库，请通知我，我将使用原始代码更新您。
编辑:我已应提问者的要求更新了代码片段，以包含实际的源代码而不是库。在 CSS 中，您现在可以查看代码的功能并从中学习。 (需要注意的是，这段代码是直接从BootStrap 4.0.0复制粘贴的)。
* {
margin: 5px;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}<div class="row">
<div class="col">
<img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
<h2 class="rider-name">Marc Marquez</h2>
<p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
</div>
<div class="col">
<img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
<h2 class="rider-name">Andrea Dovizioso</h2>
<p class="rider-desc">So close in 2017!</p>
</div>
</div>
<div class="row">
<div class="col">
<img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
<h2 class="rider-name">Marc Marquez</h2>
<p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
</div>
<div class="col">
<img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
<h2 class="rider-name">Andrea Dovizioso</h2>
<p class="rider-desc">So close in 2017!</p>
</div>
</div>
<div class="row">
<div class="col">
<img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
<h2 class="rider-name">Marc Marquez</h2>
<p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
</div>
<div class="col">
<img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
<h2 class="rider-name">Andrea Dovizioso</h2>
<p class="rider-desc">So close in 2017!</p>
</div>
</div>
<div class="row">
<div class="col">
<img class="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
<h2 class="rider-name">Marc Marquez</h2>
<p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
</div>
<div class="col">
<img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
<h2 class="rider-name">Andrea Dovizioso</h2>
<p class="rider-desc">So close in 2017!</p>
</div>
</div>关于html - 正确对齐 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48372899/