html - html为移动设备创建仪表板

Question

我必须创建以下 html，尝试将 div 用于“过去 24 小时”和“上个月”，并将其他 div 用于其他内容，但结果却一团糟。请帮助我，应该使用什么结构？桌子？分区？谢谢

Answer 1

这乞求成为一个网格。我会将divs 与一些现成的网格一起使用，例如Bootstrap中的网格。

例如，它可能看起来像这样：

<div class="container">
  <div class="row">
    <div class="span6">LAST 24 HOURS</div>
    <div class="span6">LAST MONTH</div>
  </div>
  <div class="row">
    <div class="span6">283</div>
    <div class="span6">put a nested grid here</div>
  </div>
  <div class="row">
    <div class="span3">Facebook<div class="value">10%</div></div>
    <div class="span3">Twitter<div class="value">9%</div></div>
    <div class="span3">Foursquare<div class="value">7%</div></div>
    <div class="span3">Others<div class="value">5%</div></div>
  </div>
</div>

然后添加一些 css 类并使用它来浮动、更改字体大小、颜色等。