我該如何解決這個問題？

我想創建一個網站，但這些圖片我不工作，他們應該在標題下，例如，酒精照片應該在酒精標題下，神經系統照片應該在神經系統標題下。我該如何解決這個問題？

這裏是它的外觀像此刻的截圖：

這是我的時刻代碼：

HTML：http://hastebin.com/utafabumof.xml CSS：http://hastebin.com/arefipaguy.css

謝謝你的幫助如果你可以的話。這意味着很多。

來源

2016-03-15 Jacob Lane

刪除該規則'.nerimage {填充左：1000像素; }'並將float添加到圖像。使文本與匹配圖像的寬度相同，並向它們添加「text-align：center;」。 – destoryer

我已經完成了你告訴我要做的編輯，它就是這樣編輯出來的：https：//imgur.com/vXG3sFu新的CSS：http://hastebin.com/ijefobikif.css –

製作第一個圖像'float：左'和第二個'浮動：右'。 – destoryer

的圖像應該是相同的div內部，例如醇圖像應該是在

<div class="science"> 
    <div class="alco">Image for Alco goes Here</div> 
    <div class="nersys">Image for Nersys goes Here</div> 
</div>

來源

2016-03-15 19:03:06 Foxy

科學課的標題是「科學：」 –

@JacobLane我在你的評論前幾分鐘就編輯了正確的div名，我的不好。 – Foxy

這並沒有幫助它搞砸了緊張的頭銜。 –

嘗試此。 HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Science - Portfolio</title> 
<link rel="stylesheet" type="text/css" href="styles/science.css"/> 
</head> 

<body> 
    <header> 
    <div class="nav"> 
     <ul> 
     <li class="home"><a href="index.html">Home</a></li> 
     <li class="about"><a href="english.html">English</a></li> 
     <li class="news"><a href="#">Hosptality & Catering</a></li> 
     <li class="contact"><a href="#">Leisure & Tourism</a></li> 
     <li class="contact"><a href="#">BTEC Computing</a></li> 
     <li class="contact"><a href="#">BTEC Business</a></li> 
     <li class="contact"><a href="#">CV</a></li> 
     </ul> 
    </div> 
    </header> 

    <div class="science"> 
    <center><h2>Science:</h2></center> 
    </div> 

    <div class="center-block"> 
    <div class="alco"> 
     <h4>Alcohol:</h4> 
     <div class="alcoimage"><a href="file:///N|/Documents/My Documents/Year 11/Computing/Website home version/of mice and men.html"><img src="images/Science/alcohol.jpg" width="400" height="357" alt=""/></a></div> 
    </div> 
<div class="nersys"> 
    <h4>Nervous System:</h4> 
    <div class="alcoimage"><a href="file:///N|/Documents/My Documents/Year 11/Computing/Website home version/cannabis speech.html"><img src="images/Science/NervousSystem.jpg" width="291" height="291" class="nerimage" /></a></div> 
    </div> 
    </div> 



<div id="wrapper"> 
    <div id="footer"> 
     <p><center>Contact Me:</center></p> 
     <p><center>[email protected]</center></p> 
    </div> 
    </div> 

</body> 
</html>

和CSS文件：

.... 
    .science { 
     padding-top: 30px; 
    } 

    .center-block{ 
     text-align: center; 
    } 
    .center-block .alco { 
     display: inline-block; 
     vertical-align: top; 
     text-align: center; 
     padding-right:150px; 
    } 
    .center-block .nersys{ 
     display: inline-block; 
     text-align: center; 
     padding-left:150px; 
    } 

    .alcoimage { 
     padding-top: 60px; 
    } 

    #footer { 
     background:#40ea3c; 
     width:100%; 
     height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    color: white; 
    }

來源

2016-03-15 19:30:47

謝謝，這有很大的幫助。 –

不客氣。祝你好運。 –

我該如何解決這個問題？

回答

相關問題