CSS网格效果问题

CSS Grid effect issue

本文关键字:问题 网格 CSS      更新时间:2023-09-26

我需要一些帮助来创建一个网格…我想让它看起来像这个网站: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,如果你能告诉我它是如何工作的。感谢那些帮助我解决我遇到的问题的人:)

您可以使用CSS vw单元。看看这把小提琴。

<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);
}