Проблема с CSS-сеткой

0

Мне нужна помощь в создании сетки... Я хочу, чтобы она выглядела как этот сайт: 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 $1.8 billion sale to Adobe.&lt;/p&gt;&lt;p&gt;Josh serves as a member of the World Economic Forum 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 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 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 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, с которыми я никогда не работал; Я noob btw...

Поэтому я обеспокоен тем, как сделать эту сетку, просто используя html, css и js... или AngularJs, если вы сможете показать мне, как это работает. Спасибо тем, кто помогает мне в проблеме, которая у меня была :)

1 ответ

1
Лучший ответ

Вы можете сделать это с помощью CSS vw. взгляните на эту скрипку.

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);
}
  • 0
    Спасибо! это так близко к тому, что я хочу, но как добавить эффект, когда наведу курсор мыши? Я хочу, чтобы заголовок всегда отображался, и при наведении курсора на него будет отображаться больше текста.
  • 0
    Вы должны узнать о событиях CSS и JQuery, возможно. задать еще один вопрос об этом, и дайте мне знать, чтобы дать вам ответ
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню