Responsive Raster in HTML und CSS

Ich muss ein reaktionsfähiges Raster in HTML und CSS wie in dieser Skizze erstellen. Die 4 kleinsten Boxen sollten ein font-awesome Icon enthalten.Responsive Raster in HTML und CSS

Ich habe es bereits mit Bootstrap versucht, aber es ist notwendig, dass der Abstand zwischen icon und img gleich bleibt und nicht so groß ist.

Vielen Dank für Ihre Vorschläge.

Layout Wireframe

Quelle

2016-08-09 Bpunktneff

* Ich habe es bereits mit Bootstrap versucht * Sie sollten diesen Code in Ihre Frage aufnehmen. Ohne es bleibt * img gleich und ist nicht so groß * macht keinen Sinn, weil wir nicht sehen können, was mit deinem Versuch falsch läuft. – BSMP

Zeig uns, was du bisher versucht hast. –

Sie müssen sie Position zu machen: fixed oder position: absolute (je nachdem, was sonst auf Ihrer Seite ist, wahrscheinlich werden Sie mit festen gehen), dann ber verwenden (), um die Positionen zu erhalten, sehen diese Geige:

https://jsfiddle.net/k79ouu0u/

<!doctype html> 
<html> 
<head> 
    <title> Boxes </title> 
    <style> 

     .center-box { 
      position:fixed; 
      top :calc(50% - 100px); height:200px; 
      left:calc(50% - 100px); width :200px; 
     } 

     .left-panel { 
      position:fixed; 
      top:calc(50% - 40px);height:80px; 
      left:10px;width:calc(50% - 10px - 100px - 10px); 
     } 

     .right-panel {                
      position:fixed; 
      top:calc(50% - 40px);height:80px; 
      left:calc(50% + 100px + 10px);width:calc(50% - 10px - 100px - 10px); 
     } 

     .top-panel { 
      position:fixed; 
      left:calc(50% - 30px);right:10px; 
      height:80px; top:calc(50% - 100px - 80px - 10px); 
     } 

     .bottom-panel { 
      position:fixed; 
      left:calc(50% - 30px);right:10px; 
      height:80px; top:calc(50% + 100px + 0px + 10px); 
     } 


     .center-box {background:red;border:1px solid black} 
     .left-panel {background:green;border:1px solid black}  
     .top-panel  {background:green;border:1px solid black}  
     .bottom-panel {background:green;border:1px solid black}  
     .right-panel {background:green;border:1px solid black}  

    </style> 
</head> 
<body> 

    <div class="center-box"></div> 
    <div class="left-panel"></div> 
    <div class="right-panel"></div> 
    <div class="top-panel"></div> 
    <div class="bottom-panel"></div> 


</body> 
</html>

Whe Wenn Sie fertig sind, versuchen Sie ein ansprechendes Tester-Tool (wie http://reframe.deneskellner.com - ja, das ist mein selbst gemachtes) um zu sehen, ob sie sich gut bewegen.

Quelle

2017-02-02 20:20:21 dkellner

Responsive Raster in HTML und CSS

Antwort

Verwandte Themen