带有CSS网格的员工目录

时间：2018-01-16 15:54:22

标签： css css-grid

我正在尝试创建名称，电子邮件和电话号码的员工目录。在桌面上，我希望直接浏览信息，但一旦移动，电子邮件和号码将以名称命名。

我被html难倒了。有什么建议吗？

<div class="grid-container">
     <h3 class="name">James Francis <span>- Account Manager</span></h3>
    <a class="email" href="mailto:james@balancinglifesissues.com">james@balancinglifesissues.com</a>
    <div class="number-grid">
      <a class="number-grid-a" href="tel:3478661021">Mobile: 347-866-1021</a>
      <a class="number-grid-b" href="tel:9147629075">Main: 914-762-9075 x6</a>
    </div>

    <h3 class="name">Trish Morrison <span>- Account Manager</span></h3>
    <a class="email" href="mailto:trish@balancinglifesissues.com">trish@balancinglifesissues.com</a>
    <div class="number-grid">
      <a class="number-grid-c" href="tel:9144943571">Mobile: 914-494-3571</a>
      <a class=:number-grid-d href="tel:9147629075">Main: 914-762-9075 x2</a>
    </div>

    <h3 class="name">Kim Barna <span>- Account Manager</span></h3>
    <a class="email" href="mailto:kim@balancinglifesissues.com">kim@balancinglifesissues.com</a>
    <a class="number" href="tel:2039843040">Mobile: 203-984-3040</a>

     <h3 class="name">Sean Mullin <span>- Assistance Account Manager</span></h3>
    <a class="email" href="mailto:billing@balancinglifesissues.com">billing@balancinglifesissues.com</a>
    <div class="number-grid">
      <a class="number-grid-e" href="tel:9146409366">Mobile: 914-640-9366</a>
      <a class="number-grid-f" href="tel:9147629075">Main: 914-762-9075 x7</a>
    </div>
    <h3 class="name">Samela Grant <span>- Accounts Payable Manager</span></h3>
    <a class="email" href="mailto:samela@balancinglifesissues.com">samela@balancinglifesissues.com</a>
    <div class="number-grid">
      <a class="number-grid-g" href="tel:3478661021">Mobile: 347-866-1021</a>
      <a class="number-grid-h" href="tel:9147629075">Main: 914-762-9075 x5</a>
   </div>

   <h3 class="name">Laverne McGarrell <span>- Clerk</span></h3>
   <a class="email" href="mailto:laverne@balancinglifesissues.com">laverne@balancinglifesissues.com</a>
   <a class="number" href="tel:9147629075">Main: 914-762-9075 x3</a>


   <h3 class="name">Lindsay Gilmore <span>- Account Manager</span></h3>
   <a class="email" href="mailto:lindsay@balancinglifesissues.com">lindsay@balancinglifesissues.com</a>
   <div class="number-grid">
     <a class="number-grid-i" href="tel:9146425157">Mobile: 914-642-5157</a>
     <a class="number-grid-j" href="tel:9147629075">Main: 914-762-9075 x*</a>
  </div>

  </div>

1 个答案:

答案 0 :(得分：0)

如果您不担心支持IE9或更低版本，可以使用Flexbox。

然而，创建一个简单的网格非常容易......

  • 将每组详细信息（在您的情况下，每个联系人）分成自己的<div>。我将.grid-group应用于每个群组。
  • 将每个详细信息（姓名，电子邮件，电话号码）分隔为自己的<div>。我将.grid-cell应用于每个
  • 将float:left和width:100%应用于每个.grid-cell - 这将导致每个联系人默认为100％宽度
  • 设置@media规则，以便在视口为.grid-group或更低时将每个width:33.3%更改为768px。现在，当视口较小时，单元格将会是“网格”。是三分之一宽度

我在下面提供了代码段和代码。但是在Stack Snippet工具中检查@media查询很困难。所以，这是一个关于CodePen的演示：https://codepen.io/noahjwhitmore/pen/eyLwrd/

显然，我会把剩下的造型留给你。但是，希望这是一个很好的起点。

更多资源

您一定要在MDN等知名网站上查看有关media个查询的更多信息。当我第一次开始学习media个查询时，this article on CSS Tricks非常宝贵。

我在这里创建的示例不使用Flexbox，因此它比您可能看到的其他网格稍微复杂一些。一旦你有media规则和Flexbox协同工作，它就会很棒。现代浏览器支持使用Flexbox，我强烈建议您look into it。请记住，它在IE9及更低版本中不受支持，并且仍有一些正在进行的IE问题，但它正变得越来越标准。

请记住，还有很多框架已经内置网格用于响应式设计。

  • 显然Bootstrap - v3.3.7有一个不使用Flexbox的网格。较新版本的Bootstrap（v4）已更改，现在其内置网格 基于Flexbox
  • Milligram是一个非常小的框架，并且内置了一个非常好的基于Flexbox的网格

＆＃13;
＆＃13; 
/* Stuff specific to your markup */
/* Make things start at the same size */
h3, a {
  font-size:initial;
  font-weight:initial;
  text-decoration:none;
  padding:0;
  margin:0;
}
/* Make phone numbers appear on their own line */
a[href^="tel:"] {
  display:block;
}


/************************
 * Extremely Basic Grid *
 ***********************/
.grid-group, .grid-cell {
  box-sizing: border-box;
}

.grid-cell {
  float: left;
  width: 100%;
}

/* Clearfix */
.grid-group {
  *zoom: 1;
}
.grid-group:before, .grid-group:after {
  display: table;
  content: "";
  line-height: 0;
}
.grid-group:after {
  clear: both;
}


/*
   Cells will be 33.3% until screen
   is smaller than 768px when cells
   become 100% (which was set above
   in the .grid-cell declaration)
*/
@media screen and (min-width:768px) {
  .one-third {
    width:33.3%;
  }
}
＆＃13; 
<div class="grid-container">
  <div class="grid-group">
    <div class="grid-cell one-third">
      <h3 class="name">James Francis <span>- Account Manager</span></h3>
    </div>
    <div class="grid-cell one-third">
      <a class="email" href="mailto:james@balancinglifesissues.com">james@balancinglifesissues.com</a>
    </div>
    <div class="grid-cell one-third">
      <a href="tel:3478661021">Mobile: 347-866-1021</a>
      <a href="tel:9147629075">Main: 914-762-9075 x6</a>
    </div>
  </div>
  <div class="grid-group">
    <div class="grid-cell one-third">
      <h3 class="name">Trish Morrison <span>- Account Manager</span></h3>
    </div>
    <div class="grid-cell one-third">
      <a class="email" href="mailto:trish@balancinglifesissues.com">trish@balancinglifesissues.com</a>
    </div>
    <div class="grid-cell one-third">
      <a href="tel:9144943571">Mobile: 914-494-3571</a>
      <a href="tel:9147629075">Main: 914-762-9075 x2</a>
    </div>
  </div>
  <div class="grid-group">
    <div class="grid-cell one-third">
      <h3 class="name">Kim Barna <span>- Account Manager</span></h3>
    </div>
    <div class="grid-cell one-third">
      <a class="email" href="mailto:kim@balancinglifesissues.com">kim@balancinglifesissues.com</a>
    </div>
    <div class="grid-cell one-third">
      <a class="number" href="tel:2039843040">Mobile: 203-984-3040</a>
    </div>
  </div>
  <div class="grid-group">
    <div class="grid-cell one-third">
      <h3 class="name">Sean Mullin <span>- Assistance Account Manager</span></h3>
    </div>
    <div class="grid-cell one-third">
      <a class="email" href="mailto:billing@balancinglifesissues.com">billing@balancinglifesissues.com</a>
    </div>
    <div class="grid-cell one-third">
      <a href="tel:9146409366">Mobile: 914-640-9366</a>
      <a href="tel:9147629075">Main: 914-762-9075 x7</a>
    </div>
  </div>
  <div class="grid-group">
    <div class="grid-cell one-third">
      <h3 class="name">Samela Grant <span>- Accounts Payable Manager</span></h3>
    </div>
    <div class="grid-cell one-third">
      <a class="email" href="mailto:samela@balancinglifesissues.com">samela@balancinglifesissues.com</a>
    </div>
    <div class="grid-cell one-third">
      <a href="tel:3478661021">Mobile: 347-866-1021</a>
      <a href="tel:9147629075">Main: 914-762-9075 x5</a>
    </div>
  </div>
  <div class="grid-group">
    <div class="grid-cell one-third">
      <h3 class="name">Laverne McGarrell <span>- Clerk</span></h3>
    </div>
    <div class="grid-cell one-third">
      <a class="email" href="mailto:laverne@balancinglifesissues.com">laverne@balancinglifesissues.com</a>
    </div>
    <div class="grid-cell one-third">
      <a class="number" href="tel:9147629075">Main: 914-762-9075 x3</a>
    </div>
  </div>
  <div class="grid-group">
    <div class="grid-cell one-third">
      <h3 class="name">Lindsay Gilmore <span>- Account Manager</span></h3>
    </div>
    <div class="grid-cell one-third">
      <a class="email" href="mailto:lindsay@balancinglifesissues.com">lindsay@balancinglifesissues.com</a>
    </div>
    <div class="grid-cell one-third">
      <a href="tel:9146425157">Mobile: 914-642-5157</a>
      <a href="tel:9147629075">Main: 914-762-9075 x*</a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题