html - 我想以列格式添加彼此相邻的卡片和图像

Question

我想在两个相邻的列中添加一张卡片和一张图片。但是当我尝试这样做时，它是以行的方式出现的，但我想要的是左侧应该用卡片填充，右侧应该用图片。

div='column1' 包含显示图像的 div。图像必须位于右侧并且必须与卡片相邻

div='column2' 包含卡片 div，应该放在手边的左侧。

我的两个 div 标签堆叠在一起，而我希望它们彼此相邻，例如在列中。

span 和 div 标签之间是否也有区别，因为据我所知，它们对我来说都是一样的。

任何人都可以在这种情况下指导我，而且我对这些列和行以及带有 css 的网格的东西非常不好，任何可能有帮助的链接？

.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 10px;
  height: 500px;
  width: 400px;
  /* Should be removed. Only for demonstration */
}

.column {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 10px;
  height: 500px;
  width: 900px;
  /* Should be removed. Only for demonstration */
}

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Arial;
}

.card_agi_container {
  border-radius: 10px;
  background-color: #732a12;
  width: 250px;
  height: auto;
  margin: 10%;
  padding: 10px;
}

.background {
  text-align: center;
  background: linear-gradient(to left, #120a07, #851804);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.content {
  background: linear-gradient(to left, #120a07, #851804);
  padding: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.image {
  height: 150px;
  width: 250px;
  border-radius: 5px;
}

.hero-name {
  text-align: center;
  font-size: 19px;
  font-weight: lighter;
  padding: 10px;
}

.hero-type {
  background-color: black;
  padding: 7px;
  color: whitesmoke;
  border-radius: 5px;
  width: 100px;
  display: block;
  text-align: center;
  position: relative;
  top: -70px;
}

.dota2-hero-profile {
  text-align: center;
  font-size: 14px;
  padding: 20px;
}

.hero-stats>p {
  letter-spacing: 1px;
}

<div class="top-part">
  <div class="row" text-align: center;>

    <!-- The div for the card -->
    <div class="column2">

      <div class="card_agi_container">
        <div class="background">
          <img src="C:\Users\Hp\Desktop\New folder\img.jpg" class="image" alt="Nevermore">
        </div>

        <div class="content">
          <h1 class="hero-name">Shadow Fiend</h1>
          <span class="hero-type">Agility</span>
          <div class="hero-stats">
            <p>Win Rate : 50%</p>
            <p>Pick Rate :50%</p>
            <p>Ban Rate : 50%</p>
            <p color="green">Percentage Change :2.3%</p>
          </div>
          <h1 class="dota2-hero-profile">Detail View</h1>
        </div>
      </div>
    </div>

    <!-- The div for the image -->
    <div class="column1">
      <div class="profile-image">
        <img src="E:\FAST\Hit\E-sports-Lab\img\hero-profile\sf.png">
      </div>
    </div>
  </div>
</div>

Answer 1

当你使用 flex box 时，你必须将容器设置为显示 flex。在您的示例中，添加以下内容将创建 2 列。

.row{
    display: flex;
}

这告诉浏览器将 .row 中的所有内容分成相等的列。因为 .row 中有 2 个 div 标签，结果是您最终会在自己的列中找到每个标签。如果您希望它们是等宽的列，您可以向每列添加 width: 50%。

你想让个人资料图片在红色区域内，还是在红色区域外？如果您希望它位于红色框内，则需要将 .content div 的显示类型设置为 display: flex，然后该元素内的两个 div 用于两个不同的列。

作为旁注，我注意到在您的 CSS 中您有一些用于 .column 的东西，而我认为您的意思是 .column1。

---

至于div和span的区别。 div 是 block 级元素，而 span 是内联元素。这意味着 div 标签本质上与带有 display: block 的 span 标签相同。尽管如果您尝试将 div 标签放在 span 标签内，浏览器可能会崩溃，但它的作用远不止于此。

通常您会使用 div(以及其他标签，如 section、main、article 等)来布置所有内容。然后，如果您希望在不创建换行符的情况下为元素的某些部分(如句子​​中的几个单词或图标)添加一些额外的样式(这是您从 block 元素中获得的)，那么您将使用跨度标签。

如果你看一下this question ，您将获得更好的解释以及何时使用它们的一些示例。