Question

新手编码在这里目前正在练习显示和定位。我创建了一个网页，其中包含几个div，其中包含的信息与我下面编码中显示的相同（图像，标题，单行段落）。这些以垂直顺序显示在页面上向下滚动，但是我现在希望将这些div并排放置在向下滚动页面的2行中，而不是一个在另一个上面。所以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;
}

Answer 1

这可以通过使用Bootstrap库及其内置网格系统轻松完成，如下所示：

但是，如果您不想使用外部库，请通知我，我将使用原始代码更新您。

编辑：我已根据提问者的要求更新了Snippet，以包含实际的源代码而不是库。在CSS中，您现在可以看到代码如何运作并从中学习。（需要注意的是，此代码是直接从BootStrap 4.0.0复制并粘贴的。）

＆＃13;

* {
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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试将每对div元素并排放置在一个新div元素的旁边。然后，您可以将元素浮动到内部，并将它们放置在正确的位置。因此，在布局中，您将拥有每列两列的行。

正确对齐Div

2 个答案: