外部CSS高度不起作用

我正尝试使用外部样式页面对页面进行样式设置。我的一些div选择了所有的样式，有些则没有。特别是，其中包含图像文件的所有样式都采用除高度和/或宽度之外的所有样式。 z位置，左侧，顶部等都工作正常。我检查了DOM浏览器，并没有显示它从body标签继承它的大小，但我无法弄清楚为什么它不会正确调整大小。外部CSS高度不起作用

HTML：

<!DOCTYPE html> 
    <html lang = "en"> 
    <head> 
     <meta charset = "utf-8" /> 
     <link rel="stylesheet" type="text/css" href="race_inprogress.css"> 
     <script type='text/JavaScript' src="race.js" language=javascript></script> 
    </head> 

    <body> 

     <h1 class = "amazing"> The Amazing Race For an A! </h1> 

     <h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1> 

     <div id="traffic-light"> 
     <div id="stopLight" class="bulb"></div> 
     <div id="slowLight" class="bulb"></div> 
     <div id="goLight" class="bulb"></div> 
     </div> 

     <input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;"> 

     <div class = "racer1"> 
      <img src=images/teacher.jpg id='i1'> 
     </div> 
      <br><br><br><br> 
     <div class = "racer2"> 
      <img src=images/meis.png id='i2'> 
     </div> 

     <div class = "road1"> 
      <img src=images/road.jpg> 
     </div> 

     <div class = "road2"> 
      <img src=images/road.jpg> 
     </div> 

     <div class = "winners"> 
      <img src=images/winner_ford.png id='image1' onclick="reset()"> 
      <br><br><br><br> 
      <img src=images/winner_meis.png id='image2' onclick="reset()"> 
     </div> 

     <script> 
      illuminateRed() 
      hideImage() 
     </script> 

    <div class="vertical-line"> 
    </div> 

    </body> 
</html>

CSS：

html 
{ 
    height: 100%; 
    width: 100%; 
} 

body 
{ 
font-family: sans-serif; 
background: url("images/checkback.png"); 
background-repeat: no-repeat; 
background-size: cover; 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
overflow-x: hidden; 
} 

div.racer1 
{ 
    width: 10px; 
    position:absolute; 
    left: 25px; 
    top: 325px; 
    z-index: 2; 
} 

div.racer2 
{ 
    width: 10px; 
    position:absolute; 
    left: 25px; 
    top: 500px; 
    z-index:2; 
} 

div.road1 
{ 
    position:absolute; 
    left: 30px; 
    top: 325px; 
    z-index: 1; 
    height: 133px; 
    width: 1180px: 
} 

div.road2 
{ 
    position: absolute; 
    left: 30px; 
    top: 500px; 
    z-index: 1; 
    height: 133px; 
    width: 1180px; 
} 

div.winners 
{ 
    position:absolute; 
    left: 5px; 
    top: 0px; 
    z-index: 3; 
    width: 100%; 
    height: 100%; 
} 

h1.amazing 
{ 
    font-size: 30px; 
    position: relative; 
    top: 150px; 
    left: 20px; 
    color: gold; 
} 

h1.fordmeis 
{ 
    font-size: 30px; 
    position: relative; 
    top: 90px; 
    left: 700px; 
    color: gold; 
} 

#traffic-light 
{ 
height: 200px; 
width: 100px; 
left: 500px; 
position: absolute; 
background-color: #333; 
border-radius: 40px; 
margin: -100px 0; 
padding: 20px; 
} 

.bulb 
{ 
height: 50px; 
width: 50px; 
background-color: #111; 
border-radius: 50%; 
margin: 15px auto; 
transition: background 500ms; 
} 

div.vertical-line 
{ 
width: 0px; 
height: 315px; 
top: 55px; 
position:relative; 
left: 1200px; 
color: gold; 
border: 10px inset; 
z-index: 1; 
}

来源

2016-05-02 Michael Meis

您需要定义的img标签图像的高度和宽度内联。 <img src="path/to/image" height="42" width="42">

来源

2016-05-02 04:53:01

它使用内联标签很好，但这是针对学校项目和在课程开始时指定的使用外部样式表的指导员 –

试试这一个 .racer1 img {height：100％; 宽度：100％; } –

标签上的啊，width =“”不是CSS，而是实际的HTML标签属性。如果您在技术上进入页面渲染和绘画，建议图像至少有一个宽度设置，以便没有多个计算。添加类似style =“width：100px”的属性将被视为内联样式。 –

很难说完全没有图像供参考。一个工作示例将有助于确认（看起来也有外部JS）。其中一个主要的罪魁祸首是：图像大于容器内的容器？如果是这样，并且您没有设置图像的最大宽度为100％，那么它们将会突破设置的布局宽度/高度。如果您想要剪切图像，则在overflow：hidden中添加将保留这些确切的宽度，而不会显示所有图像。

来源

2016-05-02 04:54:00

我不确定我完全遵循你所说的话。还有js，我不认为它是相关的，所以我没有包括它。只要我使用内联标签，完全相同的样式就可以正常工作，但当我将其移动到外部样式表时，它只会停止工作。这些图片都比我展示的图片大，但我认为宽度和高度标签会缩小它们，这是不准确的吗？ –

如果你想看到完整的代码工作，我可以在谷歌驱动器上与你分享，我试图让小提琴工作，但无法弄清楚。我不擅长这个东西。 –

您发布的示例没有设置内联高度或宽度的图像。如果您没有设置内嵌宽度（例如），可能是因为您提到图像确实较大而导致的罪魁祸首。向样式添加img {max-width：100％}是否可以解决问题？如果你确定JS没有影响，那么可能不用担心。 –

外部CSS高度不起作用

回答

相关问题