Question

我目前正在尝试重新创建一个摄影网站以进行练习，而我创建了中殿酒吧和图标。我在图片上遇到了困难。我想将它们对准导航栏的右侧，并努力找出来。请给我一些反馈。我会张贴我的源代码和试图复制的摄影网站。这是网站链接：https://www.samalive.co/

body {
  background-color: #faf9f9;
  padding: 70px;
}

header {
  list-style-type: none;
  line-height: 40px;
  margin-left: 20px;
  margin-top: 200px;
  font-family: 'Fjalla One', sans-serif;
}

.footer {
  margin-left: 20px;
}

.title {
  padding-right: 20px;
  font-family: 'Shadows Into Light', cursive;
  font-size: 30px;
  letter-spacing: 5px;
}

hr {
  border-top: none;
  border-left: none;
  width: 500px;
}


img {
  width: 30%;
  float: left;
  display: block;
  padding: 17px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Shadows+Into+Light" rel="stylesheet">
</head>

<body>

  <div class="header">
    <header>
      <nav>
        <h1 class="title">Am Alive</h1>
        <li>Home</li>
        <li>City</li>
        <li>Portrait</li>
        <li>Lifestyle</li>
        <li>About</li>
      </nav>
    </header>
    <hr align="left">
    <div class="footer">
      <a class="footer-link" href="https://twitter.com/"><i class="fab fa-instagram"></i></a>
      <a class="footer-link" href="https://twitter.com/because_imalex"><i class="fab fa-twitter"></i></a>
      <p>© 2018 Visual Madness.</p>
    </div>
  </div>







  <img src="images/waterfall1.jpg" alt="">
  <img src="images/waterfall2.jpg" alt="">


</body>

</html>

Answer 1

您已将图像设置为向左浮动。我将其他所有内容都设置为向左浮动，以便按顺序排列，否则您可以使用float：right。

body {
  background-color: #faf9f9;
  padding: 70px;
}

header {
  list-style-type: none;
  line-height: 40px;
  margin-left: 20px;
  margin-top: 200px;
  font-family: 'Fjalla One', sans-serif;
  float: left;
}

.footer {
  margin-left: 20px;
  float: left;
}

.title {
  padding-right: 20px;
  font-family: 'Shadows Into Light', cursive;
  font-size: 30px;
  letter-spacing: 5px;
  float: left;
}

hr {
  border-top: none;
  border-left: none;
  width: 500px;
  float: left;
}


img {
  width: 30%;
  float: left;
  display: block;
  padding: 17px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Shadows+Into+Light" rel="stylesheet">
</head>

<body>

  <div class="header">
    <header>
      <nav>
        <h1 class="title">Am Alive</h1>
        <li>Home</li>
        <li>City</li>
        <li>Portrait</li>
        <li>Lifestyle</li>
        <li>About</li>
      </nav>
    </header>
    <hr align="left">
    <div class="footer">
      <a class="footer-link" href="https://twitter.com/"><i class="fab fa-instagram"></i></a>
      <a class="footer-link" href="https://twitter.com/because_imalex"><i class="fab fa-twitter"></i></a>
      <p>© 2018 Visual Madness.</p>
    </div>
  </div>







  <img src="images/waterfall1.jpg" alt="">
  <img src="images/waterfall2.jpg" alt="">


</body>

</html>

我如何正确对齐图像？

1 个答案: