Question

我是网络开发的新手，我正在尝试用HTML和CSS创建一个非常简单的基于卡片的“仪表板”页面。

您可以在jsfiddle上看到此基本示例（内容已删除）。正如你所看到的，我有两个基本的卡片大小，大小都设置为向左浮动，因此使用以下CSS类占用剩余空间：

.small-card, .large-card {
    border: 1px solid gray;
    border-radius: 3px;
    margin: 2px;
    float: left;
    width: 250px;
    height: 250px;
}

.small-card {
    height: 122px;
}

但是您可能发现的问题是较大的卡会阻挡较小的卡占用其左下方的空间，导致布局中的间隙取决于屏幕尺寸或卡片顺序。现在我很清楚浮动属性本身不会给我我正在寻找的结果。

我的问题是，这可以通过保持仪表板整体简洁性的方式解决，而不会改变HTML中定义卡的顺序吗？我只是希望卡片占据最左上方的可用空间而不留任何间隙。

我有一种感觉，这并不简单，但任何建议都值得赞赏。感谢。

Answer 1

尝试使用bootstrap grid system。

以下是一些与您的css一起使用的代码：

.small-card, .large-card {
    border: 1px solid gray;
    border-radius: 3px;
    height: 250px;
}

.small-card {
    height: 125px;
}


}

<div class='row'>
  <div class="col-xs-12">
  <div class="col-xs-6 large-card">1</div>
    <div class="col-xs-6">
    <div class='row'>
     <div class="col-xs-12 small-card">2</div>
     </div>
      <div class='row'>
      <div class="col-xs-12 small-card">3</div>
    </div>
    </div>
     <div class='row'>
      <div class="col-xs-6 small-card">4</div>
       <div class="col-xs-6 small-card">5</div>
    </div>
        <div class="col-xs-6">
    <div class='row'>
     <div class="col-xs-12 small-card">6</div>
     </div>
      <div class='row'>
      <div class="col-xs-12 small-card">7</div>
    </div>
    </div>
 
      <div class="col-xs-6 large-card">8</div>
   </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

非常简单的基于HTML / CSS卡的仪表板。卡填充未使用空间的问题。

1 个答案: