Question

我正在尝试使用外部样式页面设置页面样式。我的一些div拿起了所有的造型而有些则没有。特别是，除了高度和/或宽度之外，其中包含图像文件的所有样式都采用了所有样式。 z位置，左侧，顶部等都可以正常工作。我检查了DOM资源管理器，它没有显示它是从body标签继承它的大小但是我无法弄清楚它为什么不能正确调整它们的大小。

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;
}

Answer 1

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

Answer 2

很难说没有图像可供参考。一个工作示例将有助于确认（看起来也有外部JS）。然而，罪魁祸首的一个问题是：图像是否比它们内部的容器大？如果是这样，并且您没有将图像设置为最大宽度为100％，那么它们将超出设置的布局宽度/高度。如果你想要裁剪图像，添加溢出：隐藏将保持这些精确的宽度而不显示所有图像。

外部CSS高度不起作用

2 个答案: