HTML Grid mit perfekter Box

-2

würde Ich mag ein Miniaturbild wie diese erstellen: https://mmmastery.com/mastermind/HTML Grid mit perfekter Box

mit dem gleichen Stil.

Ich habe meine HTML und CSS hier: https://jsfiddle.net/1Lc97z7t/

<div id="wrapper" style="width: 80%; border: 1px solid red;"> 

<div class="box" style="width:20%"> 
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png"> 
    <h3>The Theory of Automation</h3> 
    <button>Access Now</button> 
</div> 

<div class="box" style="width:20%"> 
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png"> 
    <h3>The Theory of Automation</h3> 
    <button>Access Now</button> 
</div> 

<div class="box" style="width:20%"> 
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png"> 
    <h3>The Theory of Automation</h3> 
    <button>Access Now</button> 
</div> 

<div class="box" style="width:20%"> 
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png"> 
    <h3>The Theory of Automation</h3> 
    <button>Access Now</button> 
</div> 

<div class="box" style="width:20%"> 
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png"> 
    <h3>The Theory of Automation</h3> 
    <button>Access Now</button> 
</div> 

<div class="box" style="width:20%"> 
    <img src="https://mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png"> 
    <h3>The Theory of Automation</h3> 
    <button>Access Now</button> 
</div> 

</div>

Jede Idee, was soll ich zu meinem CSS hinzufügen, um es der genau das gleiche und reaktions aussehen, wenn die Bildschirmgröße reduzieren wurde.

Wenn Sie mir auch die JSFIDDLE zeigen könnten.

Quelle

2016-11-03 Gaara Itachi Uchiha

Wie über die Tasten und das Ansprechverhalten davon? Wie kann ich diesen genauen Stil anwenden? –

Das ist Bootstrap basiert. Ich würde vorschlagen, diesen Weg zu gehen. Notieren Sie die Spalte "col-sm-6 col-md-4" in ihrer Quelle - dies würde anzeigen, wie sich die div-Größe bei verschiedenen Bildschirmgrößen für das Bootstrap-Framework ändert. Das 20% Zeug wird nicht so funktionieren, wie du es gerne hättest. –

Willkommen bei SO mate –

<div class="ld_course_grid col-sm-6 col-md-4"> 
    <article id="post-9603" class="thumbnail course sfwd-courses type-sfwd-courses has-post-thumbnail"> 


      <a href="//mmmastery.com/mastermind/the-theory-of-automation/" rel="bookmark"> 
     <img src="//mmmastery.com/mastermind/wp-content/uploads/2015/11/infusionsoft-theory-of-automation.png" class="attachment-course-thumb wp-post-image" alt="infusionsoft-theory-of-automation" /> </a> 
      <div class="caption"> 
     <h3 class="entry-title">The Theory of Automation</h3> 
       <p><a class="btn shadow btn-block coursebtn" role="button" href="//mmmastery.com/mastermind/the-theory-of-automation/" rel="bookmark">Start Course</a></p> 
     </div><!-- .entry-header --> 
    </article><!-- #post-## --> 
    </div>

Sie können es auf jeden Fall kopieren

Quelle

2016-11-03 02:21:37

Haben Sie die JSFIDDLE? –

HTML Grid mit perfekter Box

Antwort

Verwandte Themen