图片和 card/image 并排 html css

Question

我使用 adobe XD 设计了这个，我正在尝试设置一个页面，在导航栏下并排放置一张图片和一张卡片，我已经设置了我的导航栏，但我无法找到关于如何实现我的目标的在线有用答案，非常感谢任何帮助，谢谢。

Answer 1

解决这种情况的最佳方法是使用 flexbox，在此处good article了解一下

首先将卡片和图片都包裹在 div 容器 class 上然后设置卡片或图像的样式，使其符合您的设计

对于导航栏，您可以使用您的导航栏，但在我的情况下。位置，z-index 和插图顶部是必要的

.navbar {
  z-index: 10000;
  position: fixed;
  top: 0px;
  width: 100vw;
  background-color: white;
}
.navbar ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
}
.menus {
  display: flex;
  margin-right: 50px;
}
.container {
  display: flex;
  justify-content: center;
  margin-top: 70px;
  gap: 20px;
}
.card {
  width: 200px;
  height: 200px;
  background-color: aqua;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox | Ex</title>
    <link rel="stylesheet" href="flexbox.css" />
  </head>
  <body>
    <nav class="navbar">
      <ul>
        <li>Logo</li>
        <ul class="menus">
          <li>Menu</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </ul>
    </nav>
    <div class="container">
      <div class="card">Card</div>
      <img src="http://placekitten.com/g/500/300" alt="banner" />
    </div>
  </body>
</html>

Answer 2

有很多方法可以用 html/css 实现这一点，但最流行的是使用 flexBox。

问题太模糊，无法给出具体答案，但我建议继续阅读 https://web.dev/learn/css/flexbox/

图片和 card/image 并排 html css

image and card/image side by side html css

html

css

image

card