您将如何显示这两个 div 元素？

Question

我很难正确地并排显示两个 div 元素，我不确定最好的方法是什么。 Here you can see what it looks like live

这就是代码：

这是图片中显示的第一个元素，第二个 div 具有完全相同的代码，只有 text/image 发生了变化。

<main class="page"><h1>Downloads</h1>
       <div class="album1">
           <div class="image">
           <img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album1">
           </div>
           <div class="text">
           <h2>Led Zeppelin III</h2>
       <ol>
           <li><a href="#">Immigrant Song</a></li>
           <li><a href="#">Friends</a></li>
           <li><a href="#">Celebration Day</a></li>
           <li><a href="#">Since I've been Loving You</a></li>
           <li><a href="#">Out on the Tiles</a></li>
           <li><a href="#">Gallows Pole</a></li>
           <li><a href="#">Tangerine</a></li>
           <li><a href="#">That's the Way</a></li>
           <li><a href="#">Bron-Y-Aur Stomp</a></li>
           <li><a href="#">Hats Off to Roy Harper</a></li>
       </ol>
           </div>
           </div>

这就是我为 CSS 准备的两个主要 div 元素，它们都称为 album1 和 album2。实际文本有自己的 div，适用于这两个元素。

.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}

.album2
{
display: flex;
float: right;
align-items:flex-start;
padding-bottom: 85px;
}

非常感谢您的帮助，因为这是我的期末考试，教授没有任何帮助:(

如果您需要更多信息，我会很乐意提供，抱歉，我还是不懂。

Answer 1

据我了解，您想并排显示相册。为此，您可以将两个相册放在一个父容器中（例如：classname = albums）并给它一个 display:flex.

也可以用justify-content: space-between;放在两端。 float: right; 不是必需的。

.albums {
  display: flex;
  justify-content: space-between;
}
.album1
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
margin-right: 30px;
}

.album2
{
display: flex;
align-items:flex-start;
padding-bottom: 85px;
}

<main class="page"><h1>Downloads</h1>
       <div class="albums">
            <div class="album1">
               <div class="image">
               ASDASD
               </div>
               <div class="text">
                     <h2>Led Zeppelin III</h2>
                     <ol>
                         <li><a href="#">Immigrant Song</a></li>
                         <li><a href="#">Friends</a></li>
                         <li><a href="#">Celebration Day</a></li>
                         <li><a href="#">Since I've been Loving You</a></li>
                         <li><a href="#">Out on the Tiles</a></li>
                         <li><a href="#">Gallows Pole</a></li>
                         <li><a href="#">Tangerine</a></li>
                         <li><a href="#">That's the Way</a></li>
                         <li><a href="#">Bron-Y-Aur Stomp</a></li>
                         <li><a href="#">Hats Off to Roy Harper</a></li>
                     </ol>
               </div>
           </div>
           <div class="album1">
             <div class="image">
             ASDASD
             </div>
             <div class="text">
                   <h2>Led Zeppelin III</h2>
                   <ol>
                       <li><a href="#">Immigrant Song</a></li>
                       <li><a href="#">Friends</a></li>
                       <li><a href="#">Celebration Day</a></li>
                       <li><a href="#">Since I've been Loving You</a></li>
                       <li><a href="#">Out on the Tiles</a></li>
                       <li><a href="#">Gallows Pole</a></li>
                       <li><a href="#">Tangerine</a></li>
                       <li><a href="#">That's the Way</a></li>
                       <li><a href="#">Bron-Y-Aur Stomp</a></li>
                       <li><a href="#">Hats Off to Roy Harper</a></li>
                   </ol>
             </div>
           </div>
       </div>

Answer 2

您可以为 div album1 和 album2 创建父 div，

然后设为 display:flex ，这样 album1 和 album2 将彼此相邻对齐。

.albumgroup { display:flex; }
.album1 { //your css here}
.album2 { //your css here}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="albumgroup">
        <div class="album1">
            <div class="image">
                <img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album1">
            </div>
    
            <div class="text">
                <h2>Led Zeppelin III</h2>
                <ol>
                    <li><a href="#">Immigrant Song</a></li>
                    <li><a href="#">Friends</a></li>
                    <li><a href="#">Celebration Day</a></li>
                    <li><a href="#">Since I've been Loving You</a></li>
                    <li><a href="#">Out on the Tiles</a></li>
                    <li><a href="#">Gallows Pole</a></li>
                    <li><a href="#">Tangerine</a></li>
                    <li><a href="#">That's the Way</a></li>
                    <li><a href="#">Bron-Y-Aur Stomp</a></li>
                    <li><a href="#">Hats Off to Roy Harper</a></li>
                </ol>
             </div>
        </div>

        <div class="album2">
            <div class="image">
                <img src="IMAGES/led-zeppelin-iii-1555363141.jpg" alt="album2">
            </div>
    
            <div class="text">
                <h2>Led Zeppelin IV</h2>
                <ol>
                    <li><a href="#">Immigrant Song</a></li>
                    <li><a href="#">Friends</a></li>
                    <li><a href="#">Celebration Day</a></li>
                    <li><a href="#">Since I've been Loving You</a></li>
                    <li><a href="#">Out on the Tiles</a></li>
                    <li><a href="#">Gallows Pole</a></li>
                    <li><a href="#">Tangerine</a></li>
                    <li><a href="#">That's the Way</a></li>
                    <li><a href="#">Bron-Y-Aur Stomp</a></li>
                    <li><a href="#">Hats Off to Roy Harper</a></li>
                </ol>
             </div>
        </div>
    </div>
    
</body>
</html>

Answer 3

我将为您提供一个非常简单的示例来说明如何执行此操作：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="album1">
            <h1>Album1</h1>
        </div>
        <div class="album2">
            <h1>Album2</h1>
        </div>
    </div>
</body>
</html>

styles.css:

* {
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    height: 100vh;
}

.album1 {
    background-color: aquamarine;
    width: 50vw;
}

.album2 {
    background-color: blueviolet;
    width: 50vw;
}

并且结果将是这样的：

然后，在你的 album1 和 album2 中，放入你想要的一切。

您将如何显示这两个 div 元素？

How would you display these two div elements?

html

css