Card resize Materialize

Ich versuche, 3 Karte zu verwenden, um die neuesten Nachrichten auf der Website anzuzeigen. Auf breiten Bildschirm sieht es aus wie diese Card resize Materialize

jedoch gut, wenn ich die Seite an den Inhalt Überlauf aus der

Karte der Größe

dies der Code

snipplet

<div class="row"> 
    <div class="col s4"> 
     <div class="card small"> 
     <div class="icon-block"> 
      <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2> 
      <div class="card-content"> 
      <h5 class="center"><?php echo $children[2]->title; ?></h5> 

      <p class="light"><?php custom_echo($children[2]->body, 200); ?></p> 
      </div> </div> 
     </div> 
     </div> 

     <div class="col s4"> 
     <div class="card small"> 
      <div class="icon-block"> 
      <h2 class="center brown-text"><i class="material-icons">group</i></h2> 
      <div class="card-content"> 
       <h5 class="center"><?php echo $children[1]->title; ?></h5> 

       <p class="light"><?php custom_echo($children[1]->body, 200); ?></p> 
      </div> </div> 
      </div> 
     </div> 

     <div class="col s4"> 
      <div class="card small"> 
      <div class="icon-block"> 
       <h2 class="center brown-text"><i class="material-icons">settings</i></h2> 
       <div class="card-content"> 
       <h5 class="center"><?php echo $children[0]->title; ?></h5> 

       <p class="light"><?php custom_echo($children[0]->body, 200); ?></p> 
       </div> </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div>

Quelle

2016-07-09 Billy Batson

Was .css bewerben Sie sich für die. Karte? –

Ich verließ .card unberührt. Ich habe versucht, .card-small mit einer festen Breite zu setzen, aber das hat nicht funktioniert. –

Was ist das CSS für '.icon-block'? –

Es ist weil Sie die Klasse zu Ihren Karten hinzugefügt haben. Entferne diese Klasse und die Größe der Karten ändert sich mit deinem Inhalt. Bei Verwendung von Materialize-Karten begrenzen die Klassen small, medium und large die Höhe der Karte, unabhängig vom Inhalt.

, auch ein reaktions Blick zu erhalten, sollten Sie denken über das Ändern Sie Ihre col Klassen, so etwas zu sehen, und fügen Sie ein container div, die Sie zentrieren und enthalten Ihre Inhalte hilft:

<div class="container"> 
<div class="row"> 
    <div class="col s12 m4"> 
    <div class="card"> 
    <div class="icon-block"> 
     <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2> 
     <div class="card-content"> 
     <h5 class="center"><?php echo $children[2]->title; ?></h5> 

     <p class="light"><?php custom_echo($children[2]->body, 200); ?></p> 
     </div> 
    </div> 
    </div> 
    </div> 

    <div class="col s12 m4"> 
    <div class="card"> 
     <div class="icon-block"> 
     <h2 class="center brown-text"><i class="material-icons">group</i></h2> 
     <div class="card-content"> 
      <h5 class="center"><?php echo $children[1]->title; ?></h5> 

      <p class="light"><?php custom_echo($children[1]->body, 200); ?></p> 
     </div> 
     </div> 
     </div> 
    </div> 

    <div class="col s12 m4"> 
     <div class="card"> 
     <div class="icon-block"> 
      <h2 class="center brown-text"><i class="material-icons">settings</i></h2> 
      <div class="card-content"> 
      <h5 class="center"><?php echo $children[0]->title; ?></h5> 

      <p class="light"><?php custom_echo($children[0]->body, 200); ?></p> 
      </div> 
     </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

Quelle

2016-07-12 02:04:06

nicht die große Klasse etwas behebt das Problem, aber die Kartenhöhe ist jetzt abhängig vom Inhalt. Wenn ich also eine Karte mit weniger als 200 Zeichen habe, ist diese Karte kürzer als andere. Gibt es eine Möglichkeit, die Höhe mit einem Mindestwert festzulegen? Sonst muss ich wahrscheinlich zusätzliche Zeichen hinzufügen in php –

Ich denke, wenn Sie möchten, dass alle Karten die gleiche Höhe haben, müssten Sie eine feste Höhe zu den Karten setzen. dann kannst du mit deinem 'card-content'-div auch eine feste Höhe einstellen, so dass es richtig in der Karte nistet, und dann setze und' overflow: scroll' auf den Absatz innerhalb 'card-content' –

Versuchen der Indienststellung .icon-block div in einem .card-content. Wenn das Problem weiterhin besteht, versuchen Sie, die Klasse .icon-block loszuwerden, nur um zu sehen, wie die Karten ohne sie reagieren.

Mit einem div mit der Klasse .card-content geben Sie Ihre Karte Polsterung von 20px gleichmäßig um den gesamten Inhalt innen, und eine overlflow:hidden. Dies sollte Ihrer Karte Struktur verleihen.

<div class="row"> 
    <div class="col s4"> 
    <div class="card "> 
     <!-- card-content- gives padding and overflow hidden to the content inside --> 
     <div class="card-content"> 
     <div class="icon-block"> 
      <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2> 
      <div class="card-content"> 
      <h5 class="center"><?php echo $children[2]->title; ?></h5> 

      <p class="light"><?php custom_echo($children[2]->body, 200); ?></p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

Auch als der Bildschirm in der Größe kleiner bekommt man die Karten anpassen, um mittlere und kleine Geräte haben wollen, anstatt auf kleine und mittlere Geräte in einer Reihe 3 Karten mit, weshalb der Text gebündelten wird und wird nicht so benutzerfreundlich. Sie könnten so etwas tun, um die Breite der Karten immer sehr nahe zu halten. Der einzige Nachteil ist, wenn die Karten nicht gestapelt werden sollen, wenn sie kleiner werden.

<div class="row"> 
    <!-- notice columns for each device size - small - medium -large --> 
    <div class="col s10 offset-s1 m6 l4"> 
    <div class="card"> 
     <div class="card-content"> 
     <div class="icon-block"> 
      <!-- I changed the size of the icon to .medium --> 
      <!-- Sizes you can use .tiny .smal .medium .large --> 
      <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2> 
      <!-- give the card-title class to your titles --> 
      <div class="card-title"> 
      <h5 class="center">Title</h5> 
      </div> 
      <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus 
      a erat rutrum pellentesque.</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- notice columns for each device size - small - medium -large --> 
    <div class="col s10 offset-s1 m6 l4"> 
    <div class="card "> 
     <div class="card-content"> 
     <div class="icon-block"> 
      <!-- I changed the size of the icon to .medium --> 
      <!-- Sizes you can use .tiny .smal .medium .large --> 
      <h2 class="center brown-text"><i class="material-icons medium">group</i></h2> 
      <!-- give the card-title class to your titles --> 
      <div class="card-title"> 
      <h5 class="center">Title</h5> 
      </div> 
      <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus 
      a erat rutrum pellentesque.</p> 

     </div> 
     </div> 
    </div> 
    </div> 
    <!-- notice columns for each device size - small - medium -large --> 
    <!-- 0n medium size it offsets this card to center it on the next row keeping all cards the same size no matter the row --> 
    <div class="col s10 offset-s1 m6 offset-m3 l4"> 
    <div class="card "> 
     <div class="card-content"> 
     <div class="icon-block"> 
      <!-- I changed the size of the icon to .medium --> 
      <!-- Sizes you can use .tiny .smal .medium .large --> 
      <h2 class="center brown-text"><i class="material-icons medium">settings</i></h2> 
      <!-- give the card-title class to your titles --> 
      <div class="card-title"> 
      <h5 class="center">Title</h5> 
      </div> 
      <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus 
      a erat rutrum pellentesque.</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

Working Example

Wenn das Problem weiterhin besteht nach wie vor Ihre Frage mit dem CSS aktualisieren.

Quelle

2016-07-11 23:54:22

Antwort

Verwandte Themen