HTML-Bild auf der Seite der gleichen Höhe

Ich versuche, ein Bild auf der Seite bleiben die gleiche Höhe wie der Rechner. Wo sollte das CSS oder HTML innerhalb der Struktur gehen? Ich möchte das Seitenverhältnis halten, so nahe möglichHTML-Bild auf der Seite der gleichen Höhe

Code: http://jsbin.com/gijitaluta/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<title>Calculator</title> 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head> 
<body> 
<div id="calculatorcontainer"> 
<div id="maincontainer"> 
<aside class="imageContainer"> 
<img src=""> 
</aside> 
    <form action="" method="post" id="theForm"> 
     <fieldset > 
      <legend>Calculator</legend> 
      <h4>Use this form to calculate the order total</h4> 
      <div class="form-group"> 
       <label for="quantity">Quantity</label> 
       <input class="form-control" id="quantity" type="number" value="1"/> 
      </div> 
      <div class="form-group"> 
       <label for="ppu">Price Per Unit</label> 
       <input type="text" class="form-control" id="ppu" placeholder="1.00" required> 
      </div> 
      <div class="form-group"> 
       <label for="tax">Tax Rate (%)</label> 
       <input type="text" class="form-control" id="tax" placeholder="0.0" required> 
      </div> 
      <div class="form-group"> 
       <label for="discount">Discount (%)</label> 
       <input type="text" class="form-control" id="discount" placeholder="0.00" required> 
      </div> 
      <div class="form-group"> 
       <label for="ttl">Total</label> 
       <input type="text" class="form-control" id="output" placeholder="0.00"> 
      </div> 
      <div> 
       <button type="submit" class="btn btn-calculate" id="submit">Calculate</button> 
      </div> 
     </fieldset> 
</form> 
    </div> 

    <footer class="footer"> 
    <h3>Copyright CSUN</h3> 
</footer> 
      </div> 
</body> 

</html>

Quelle

2017-08-03 Ryan Hubbard

Auf diese Weise verwendet eine Tabelle. Erfordert nicht viele Änderungen. Sie benötigen eine Version des Bildes mit den grauen Kanten entfernt und Sie müssen mit Padding und/oder Margen spielen.

http://jsbin.com/xepiren/edit?html,css,output

td { 
 
    background-color:#fff; 
 
} 
 
form { 
 
    padding: 5%; 
 
    /*width: 50%;*/ 
 
    font-family: 'Open Sans' 
 
} 
 

 
#theForm { 
 
    background-color: white; 
 
} 
 

 
legend { 
 
    color: red; 
 
    font-size: 1.3em; 
 
} 
 

 
#maincontainer { 
 
    margin: 5%; 
 
} 
 

 
fieldset { 
 

 
} 
 

 
img { 
 
    /*width:30%;*/ 
 
    float: right; 
 
    height: 430px 
 
} 
 

 
body { 
 
    background-color: grey; 
 
} 
 

 
fieldset { 
 
    padding: 10%; 
 
} 
 

 
#calculatorcontainer { 
 
    margin: 10%; 
 
    border-style: solid; 
 
    border-style: groove; 
 
} 
 

 
h4 { 
 
    margin: 0px; 
 
} 
 

 
footer { 
 
    padding: 10px; 
 
    border-style: solid; 
 
    border-style: groove; 
 
} 
 

 
footer h3 { 
 
    color:red; 
 
    font-size:80% 
 
} 
 
input { 
 
    width: 90% 
 
} 
 

 
#submit { 
 
    margin:10px 
 
} 
 

 

 
@media (max-width: 479px) { 
 
    
 
    img { 
 
    width:30%; 
 
    float: right; 
 
    height: 230px 
 
} 
 

 
    fieldset { 
 
    padding: 0%; 
 
    } 
 
    form { 
 
    font-size: 7px; 
 
    } 
 

 
    footer { 
 
    padding: 7px; 
 
    } 
 
    footer h3 { 
 
    color:red; 
 
    font-size:10% 
 
    } 
 
} 
 

 
@media (min-width: 1000px) { 
 
    
 
    img { 
 
    width:30%; 
 
    float: right; 
 
    height: 480px 
 
} 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Calculator</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head> 
 
<body> 
 
    <div id="calculatorcontainer"> 
 
    <div id="maincontainer">  
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <form action="" method="post" id="theForm"> 
 
       <fieldset > 
 
       <legend>Calculator</legend> 
 
       <h4>Use this form to calculate the order total</h4> 
 
        <div class="form-group"> 
 
        <label for="quantity">Quantity</label> 
 
         <input class="form-control" id="quantity" type="number" value="1"/> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="ppu">Price Per Unit</label> 
 
         <input type="text" class="form-control" id="ppu" placeholder="1.00" required> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="tax">Tax Rate (%)</label> 
 
         <input type="text" class="form-control" id="tax" placeholder="0.0" required> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="discount">Discount (%)</label> 
 
         <input type="text" class="form-control" id="discount" placeholder="0.00" required> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="ttl">Total</label> 
 
         <input type="text" class="form-control" id="output" placeholder="0.00"> 
 
        </div> 
 
        <div> 
 
         <button type="submit" class="btn btn-calculate" id="submit">Calculate</button> 
 
        </div> 
 
      </fieldset> 
 
      </form> 
 
      </td> 
 
      <td> 
 
      <aside class="imageContainer"> 
 
       <img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png"> 
 
      </aside>  
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div><!-- End "maincontainer" --> 
 

 
    <footer class="footer"> 
 
    <h3>Copyright CSUN</h3> 
 
    </footer> 
 
</div> 
 
</body> 
 
    
 
</html>

Quelle

2017-08-04 00:53:21 wazz

HTML-Bild auf der Seite der gleichen Höhe

Antwort

Verwandte Themen