Question

我需要一些关于创建网格的帮助...... 我想让它看起来像这个网站： https://www.domo.com/company/executives

以下是查看页面来源时的资金： http://jsfiddle.net/o45LLsxd/

<div ng-view="" class="ng-scope"><div class="biogrid ng-scope">
 <!-- ngRepeat: executive in notSorted(executives) --><div ng-repeat="executive in notSorted(executives)" ng-init="executive = executives[executive]" class="ng-scope">
<div class="biogrid-tile active" id="joshjames" biotile="">
    <img src="https://www.domo.com/assets/images/executives/josh-james.jpg" alt="Josh James">
    <div class="biogrid-info">
        <div class="biogrid-name ng-binding">Josh James</div>
        <div class="biogrid-title ng-binding">Founder, CEO &amp; Chairman of the Board</div>
        <div class="biogrid-handle ng-binding">
            <i class="icon-domofont-twitter-reg"></i> @joshjames
        </div>
    </div>
    <div class="biogrid-bio">
        <div class="biogrid-name ng-binding">Josh James</div>
        <div class="biogrid-title ng-binding">Founder, CEO &amp; Chairman of the Board</div>
        <div class="biogrid-handle ng-binding">
            <i class="icon-domofont-twitter-reg"></i> @joshjames
        </div>
        <p class="ng-binding">Josh founded Domo in 2010 to help CEOs and other leaders change the way they do business and obtain value from the tens of billions of dollars spent on traditional business intelligence systems. Before founding Domo, Josh was the CEO of Omniture, which he co-founded in 1996 and took public in 2006; and from 2006-2009, he was the youngest CEO of a publicly traded company.</p>
        <div class="hidden-bio ng-binding">&lt;p class='bio-intro'&gt;Josh founded Domo in 2010 to help CEOs and other leaders change the way they do business and obtain value from the tens of billions of dollars spent on traditional business intelligence systems. Before founding Domo, Josh was the CEO of Omniture, which he co-founded in 1996 and took public in 2006; and from 2006-2009, he was the youngest CEO of a publicly traded company.&lt;/p&gt;&lt;p&gt;Omniture was the number one returning venture investment out of 1,008 venture capital investments in 2004, as well as the number two performing technology IPO of 2006. Omniture was also the fastest or second fastest-growing public company for three consecutive years. In 2009, Josh facilitated Omniture's $1.8 billion sale to Adobe.&lt;/p&gt;&lt;p&gt;Josh serves as a member of the World Economic Forum's Young Global Leaders, a worldwide community of individuals committed to, and recognized for, their proven leadership and potential in shaping the future.&lt;/p&gt;&lt;p&gt;In 2012, the Utah Tech Council inducted him into its Hall of Fame and Mountain West Capital Network named Josh its Entrepreneur of the Year. In 2011, Fortune Magazine recognized him as one of its "40 Under 40: Ones to Watch" and, in 2009, as one of its "40 Under 40" top business executives. He was named the 2006 Ernst &amp; Young Entrepreneur of the Year and Brigham Young University's Technology Entrepreneur of the Decade.&lt;/p&gt;&lt;p&gt;Josh is the founder of CEO.com, a resource to help founders and CEOs stay up to date with what's happening at the executive level across top industries, as well as stay armed with the latest leadership strategies and best practices. He also founded Silicon Slopes, a non-profit initiative designed to promote the interests of Utah's high-tech industry.&lt;/p&gt;&lt;p&gt;Josh has six daughters.&lt;/p&gt;</div>
        <a href="#joshjames" class="btn btn-link">read more</a>
    </div>
</div>

我试图获得css，但似乎他们正在使用我以前从未使用过的AngularJs;我是一个菜鸟......

所以我关心的是如果你能告诉我它是如何工作的，我将如何通过使用html，css和js ......或者AngularJs来制作那个网格。感谢那些帮助我解决我所遇到的问题的人：）

Answer 1

您可以使用CSS vw单元执行此操作。看看this fiddle。

<强> HTML

<div id="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

<强> CSS

body, html{
    padding: 0;
    margin: 0;
    overflow-y: hidden;
}

#grid {
    width: 100%;
    text-align: left;
    overflow: hidden;
}

#grid .cell {
    width: 33.333333vw;
    height: 33.333333vw;
    background: white;
    float: left;
    -webkit-box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.4);
}

CSS网格效果问题

1 个答案: