您如何将四张卡包裹在居中卡上？

Question

我要创建一个包含5个卡片元素的首页。

我希望围绕居中的第5个元素有4个项目。

这是我正在尝试做的图片。 https://imgur.com/a/3jvHicq

我尝试搜索，但是没有找到一个示例，该示例讨论如何打破图片中显示的下一行“换行”文本。我只是不知道还要搜索什么。

我尝试了绝对位置，但这不是我所需要的。我尝试更改left: 100px等来对齐项目，但是如果没有绝对位置，它们甚至都不会移动（我不明白为什么）。我尝试使用浮点数，但它只会造成混乱。

.hp-container {
    background: rgb(139, 174, 250);
    flex: flex;
    justify-content: center
}

/* Left Side */
.home-card-1 {
    margin: 10px;
    background: gray;
    border-radius: 5px;
    border: solid;
    border-color: green;
    Color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}

.home-card-4 {
    margin: 10px;
    background: rgb(93, 130, 207);
    border-radius: 5px;
    border: solid;
    border-color: green;
    Color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}

/* Right Side */
.home-card-3 {
    margin: 10px;
    background: rgb(231, 126, 126);
    border-radius: 5px;
    border: solid;
    border-color: rgb(25, 0, 255);
    Color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}

.home-card-5 {
    margin: 10px 10px 10px 550px;
    background: rgb(87, 0, 29);
    border-radius: 5px;
    border: solid;
    border-color: green;
    Color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}


/* Middle */
.home-card-2 {
    margin: 10px;
    background: rgb(122, 177, 165);
    border-radius: 5px;
    border: solid;
    border-color: rgb(37, 0, 0);
    Color: white;
    text-justify: justify;
    text-align: center;
    width: 500px;
    height: 600px;
}

<div class="hp-container d-flex flex-wrap animated fadeIn">
        
          <div class="home-card-1">
              <div>
                <h2>Explainer Video</h2>
              </div>
          </div>

          <div class="home-card-2">
              <div>
                <h2>Game Hub Center</h2>
              </div>
          </div>

          <div class="home-card-3">
              <div>
                <h2>Twitter Feed</h2>
              </div>
          </div>

          <div class="home-card-4">
              <div>
                <h2>Giveaway</h2>
              </div>
          </div>

          <div class="home-card-5">
              <div>
                <h2>Gofundme</h2>
              </div>
          </div>

      </div>

Answer 1

您可以使用CSS网格系统。此示例显示了基础知识，但您可以对其进行修改并使其按要求工作

.hp-container {
  background: rgb(139, 174, 250);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

[class^='home-card-'] {
  background: grey;
  color: white;
  text-align: center;
}

.home-card-2 {
  margin: 10px 0;
}

<div class="hp-container d-flex flex-wrap animated fadeIn">
  <div class='col-1'>
    <div class="home-card-1">
      <div>
        <h2>Explainer Video</h2>
      </div>
    </div>
    <div class="home-card-4">
      <div>
        <h2>Giveaway</h2>
      </div>
    </div>
  </div>


  <div class="home-card-2">
    <div>
      <h2>Game Hub Center</h2>
    </div>
  </div>
  <div class='col-3'>
    <div class="home-card-3">
      <div>
        <h2>Twitter Feed</h2>
      </div>
    </div>



    <div class="home-card-5">
      <div>
        <h2>Gofundme</h2>
      </div>
    </div>

  </div>

</div>

Answer 2

如果您使用的是flex，则需要稍微modify your html structure。 CSS flex仅在1-d中工作（对于2-d，您应该使用CSS grid）。不过，如果要使用flex，则需要以以下方式修改html结构：三列，左包含2 div，中包含1 div，右包含2 div：

.hp-container {
    background: rgb(139, 174, 250);
    display: flex;
    justify-content: center;
    flex-direction: row;
}

/* Left Side */
.home-card-1 {
    margin: 10px;
    background: gray;
    border-radius: 5px;
    border: solid;
    border-color: green;
    color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}

.home-card-4 {
    margin: 10px;
    background: rgb(93, 130, 207);
    border-radius: 5px;
    border: solid;
    border-color: green;
    color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}

/* Right Side */
.home-card-3 {
    margin: 10px;
    background: rgb(231, 126, 126);
    border-radius: 5px;
    border: solid;
    border-color: rgb(25, 0, 255);
    color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}

.home-card-5 {
    margin: 10px;
    background: rgb(87, 0, 29);
    border-radius: 5px;
    border: solid;
    border-color: green;
    color: white;
    text-align: center;
    width: 500px;
    height: 380px;
}


/* Middle */
.home-card-2 {
    margin: 10px;
    background: rgb(122, 177, 165);
    border-radius: 5px;
    border: solid;
    border-color: rgb(37, 0, 0);
    color: white;
    text-justify: justify;
    text-align: center;
    width: 500px;
    height: 600px;
}

<div class="hp-container d-flex flex-wrap animated fadeIn">
    <div class="left-wrap">
        <div class="home-card-1">
            <div>
              <h2>Explainer Video</h2>
            </div>
        </div>
        <div class="home-card-4">
            <div>
              <h2>Giveaway</h2>
            </div>
        </div>
    </div>
      
    <div class="mid-wrap">
      <div class="home-card-2">
        <div>
          <h2>Game Hub Center</h2>
        </div>
      </div>
    </div>
      
    <div class="right-wrap">
        <div class="home-card-3">
            <div>
              <h2>Twitter Feed</h2>
            </div>
        </div>
        <div class="home-card-5">
            <div>
              <h2>Gofundme</h2>
            </div>
        </div>
    </div>
</div>

对于CSS网格，@ brk给出了很好的答案。

希望有帮助。如有任何疑问，请回复。

Answer 3

您可以像这样使用flex：

.hp-container{
  display: flex;
  flex-direction: row;
}
.card{
  color: red;
  width: 150px;
  height: 200px;
  background: yellow;
  margin: 10px;
  text-align: center;
  padding: 5px;
}
.home-card-3{
  height: 420px;
}

<div class="hp-container">
    <div class="col1">
        <div class="card home-card-1">
            <div>
                <h2>Explainer Video</h2>
            </div>
        </div>
        <div class="card home-card-2">
            <div>
                <h2>Giveaway</h2>
            </div>
        </div>
    </div>
    <div class="col2">
        <div class="card home-card-3">
            <div>
                <h2>Game Hub Center</h2>
            </div>
        </div>
    </div>

    <div class="col3">
        <div class="card home-card-4">
            <div>
                <h2>Twitter Feed</h2>
            </div>
        </div>
        <div class="card home-card-5">
            <div>
                <h2>Gofundme</h2>
            </div>
        </div>
    </div>
</div>