1. 首頁
  2. 問答
  3. 側面相同高度的HTML圖像

側面相同高度的HTML圖像

2017-08-03 363 views
0

我想讓側面的圖像保持與計算器相同的高度。 哪裏應該是CSS或HTML在結構內？我想保持縱橫比接近可能側面相同高度的HTML圖像

代碼：http://jsbin.com/gijitaluta/edit?html,output

Calculator with image aside

<!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>

來源

2017-08-03 Ryan Hubbard

回答

1

這種方式使用表。不需要很多更改。你需要一個圖像版本的灰色邊緣被刪除，你必須玩填充和/或邊距。

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>

來源

2017-08-04 00:53:21 wazz

相關問題

 相關問題