我该如何解决这个问题？

我想创建一个网站，但这些图片我不工作，他们应该在标题下，例如，酒精照片应该在酒精标题下，神经系统照片应该在神经系统标题下。我该如何解决这个问题？

这里是它的外观像此刻的截图：

这是我的时刻代码：

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

谢谢，这有很大的帮助。 –

不客气。祝你好运。 –

我该如何解决这个问题？

回答

相关问题