Wie kann ich eine Box mit Inhalt in HTML erstellen?

Ich versuche, html zu lernen, und ich brauche sollen in der Lage sein zu Abschnitt Dinge in die Stelle sie in So sein wie jedes Ding ein Bild oder einen TextWie kann ich eine Box mit Inhalt in HTML erstellen?

Ich brauche eine blaue Box zu machen haben und darin brauche ich ein Bild und einen Text Und daneben, das Gleiche. Grundsätzlich, wenn ich eine Möglichkeit hätte, eine neue in der echten zu erstellen? Ich vermute. Ich bin mir nicht sicher. Dies ist, was ich versuchte, und es ist so ziemlich was ich will, aber ich brauche die Box solide, und vielleicht könnte jemand mir helfen, das Bild und den Text auf der horizontalen Achse zentriert, die auch helfen könnte.

<html> 
    <head> 
     <title> 
      MaGa V1 
     </title> 
     <style type="text/css"> 
      .img_div {float: left; border: 1px solid white;} 
     </style> 
    </head> 
    <body bgcolor="#000000"> 
     <div class="img_div" style="margin-right: 32px"> 
      <img src="./../images/Shadows over Innistrad/Shadows over Innistrad.png"/> 
      <figcaption> 
       <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a> 
      </figcaption> 
     </div> 
     <div class="img_div" style="margin-right: 32px"> 
      <img src="./../images/Battle for Zendikar/Battle for Zendikar.png"/> 
      <figcaption> 
       <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a> 
      </figcaption> 
     </div> 
    </body> 
</html>

Quelle

2016-05-20 128Gigabytes

So etwas sollte Ihnen den Einstieg:

body {background-color:black;} 
 
.row{overflow:hidden;} /* Fixes float */ 
 
.img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;} 
 
.img_div:not(:nth-child(2)){margin-right:10px;} 
 
.img_div a{color:gold;}

<div class="row"> 
 
    <div class="img_div"> 
 
    <img src="http://placekitten.com/100/102" /> 
 
    <figcaption> 
 
     <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a> 
 
    </figcaption> 
 
    </div> 
 
    <div class="img_div"> 
 
    <img src="http://placekitten.com/102/102" /> 
 
    <figcaption> 
 
     <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a> 
 
    </figcaption> 
 
    </div> 
 
</div> 
 
<!-- .row -->

Die gesamte Seite könnte wie folgt aussehen:

<html> 
<head> 
    <!-- Usually there is some stuff in here -- up to you --> 
</head> 
<body> 
    <style> 
     body {background-color:black;} 
     .row{overflow:hidden;} /* Fixes float */ 
     .img_div {float:left;width:45%;text-align:center;padding:10px;background:blue;} 
     .img_div:not(:nth-child(2)){margin-right:10px;} 
     .img_div a{color:gold;} 
    </style> 

    <div class="row"> 
     <div class="img_div"> 
     <img src="http://placekitten.com/100/102" /> 
     <figcaption> 
      <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a> 
     </figcaption> 
     </div> 
     <div class="img_div"> 
     <img src="http://placekitten.com/102/102" /> 
     <figcaption> 
      <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a> 
     </figcaption> 
     </div> 
    </div> 
</body> 
</html>

Ich schlage vor, Sie tun this tutorial, und dann this oneNur durch sie laufen schnell

Sie können nur einen bestimmten Prozentsatz für die Höhe verwenden, wenn der übergeordnete Container (.row im Beispiel oben) eine feste Höhe hat . Die Höhe des übergeordneten Containers kann px,%, vh, em sein - aber es kann nicht automatisch sein.

Ein paar Ideen herum zu erhalten, das ist:
(1) padding zu verwenden, um die Höhe zu erhöhen, wie gewünscht, oder
(2) zu verwenden height:30vh

vh zu % sehr ähnlich ist, aber Es wird von Bildschirmeinheiten gemessen (z. B. 30/100 Bildschirmhöhe statt 30 percent of parent height) - und erfordert nicht, dass das Elternelement eine festgelegte Höhe hat. (Beachten Sie, dass es auch vw für Breiteneinstellungen. Diese sind auch nützliche Geräte für responsive Einstellungen wie vw mit/vh Sie Größen genau proportional auf unterschiedlich großen Bildschirmen machen.

jsFiddle Example

Quelle

2016-05-20 03:20:09 gibberish

, die perfekt in das Werk Code-Snippet ausführen, aber ich kann nicht herausfinden, wie ich es wirklich benutzen soll.>. <[Edit] Ich fand es dank einem Haufen! – 128Gigabytes

Platzieren Sie das CSS unter dem '' Tag und ** zwischen '' Tags. ** – gibberish

Okay, noch eine Sache, ich habe versucht, die Höhe der Boxen zu ändern, aber es funktioniert nicht img_div {float: links; Breite: 25%; Höhe: 40% $; text-align : center; padding: 10px; background: blue;} – 128Gigabytes

Wie kann ich eine Box mit Inhalt in HTML erstellen?

Antwort

Verwandte Themen