如何使卡与订单对齐？节省屏幕空间

编程问答 2022-07-23

问题描述

**如何将card5放在card1下方？ ** 如果卡中的内容太长而无法剩余可用空间。所以我也想将card放在card1下方。

  .

link for code

enter image description here

解决方法

使用浮点数。 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial,Helvetica,sans-serif;
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  float: left;
  width: 50%;
}
</style>
</head>
<body>

<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>

    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>

    <div class="card">
      <h3>Card 2</h3>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  
    <div class="card">
      <h3>Card 3</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  
    <div class="card">
      <h3>Card 4</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  
    <div class="card">
      <h3>Card 5</h3>
      <p>Some text</p>
      <p>Some text</p>
    </div>

</body>
</html>

bootstrap-4cardfrontendhtml