Question

我正在构建一个包含4个页面的基本HTML网站。随着浏览器窗口的增长/缩小，4个页面中的3个页面将自行调整大小。 1页包含一堆图片，由于某种原因，页面上的项目都转移到页面的左侧，并且不会在页面上正确居中或正确缩小以适应broswer的宽度。我不知道还能做什么。我尝试过使用各种边距和宽度命令，似乎没什么用。下面是我页面的一部分：

-----以下是我使用的HTML -----

<body id="top">


<!-- MAIN IMAGE -->


<div id="auto">
<center><img src="images/car.JPG" alt="car" name="image" width="248" height="145" id="image" /></center>
</div>


<!-- SITE NAME -->


<div id="header">
<p style="position:relative; top: -20px">####</p>
</div>


<!-- MAIN LINKS -->


<div>
<ul id="buttons" style="position:relative; top: -50px">
    <li><a href="index.html" style="color:#E5E5E5">home</a></li>
    <li><a href="gallery.html" style="color:#E5E5E5">gallery</a></li>
    <li><a href="search.html" style="color:#E5E5E5">search</a></li>
    <li><a href="contact.html" style="color:#E5E5E5">contact</a></li>
</ul>
</div>


<!-- MFR TABLE -->


<div id="links">
    <table height="45%" align="center" cellpadding="5" cellspacing="5" id="mfr" style="position: relative; top: -50px;">
        <tr>
            <td class="links"><img  width="116" height="106" /></td>
            <td class="links"><img  width="177" height="82" /></td>
            <td class="links"><img  width="148" height="118" /></td>
            <td class="links"><img  width="190" height="111" /></td>
            <td class="links"><img  width="102" height="115" /></td>
            <td class="links"><img  width="136" height="136" /></td>   
        </tr>
</div>
</body>

-----以下是我使用的CSS ----

@charset "utf-8";
/* gallery */

body {background-color: white;
        border-color: #4E4E4E;
        padding: 50px;  
}

div p {font-size:60px;
        font-family: Arial, Helvetica, sans-serif;
        color: #7F7F7F;
        text-align:center;
}

#buttons {font-family: Arial, Helvetica, sans-serif;
            font-size: 25px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
}

div li {display: inline;
        background-color:#616161;
        padding: 5px;
}

#image {text-align: center;
}

#links {margin-right: auto;
    margin-left: auto;
    width: 70%;
    height: 50%;
}

a {text-decoration: none;
color:#FFF;
}

p {text-align:center;
    font-size: 20px;
}

#mfr {height: 50%;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
}

.links {background-color: white;
    color: black;
    font-size: 18px;
    border-radius: 5px;
}

.visit {background-color:#771C2E;
    color: #FFF;
    font-size: 18px;
    border-radius: 5px;
    width:330px;
}

任何帮助将不胜感激！

Answer 1

我有一些建议给你。我几乎没有重写你的源代码，所以你可以更容易地看到一些错误。请查看它，也许它可以为您提供帮助。

也许你可以采取以下情况： *仅在一个地方书写样式，最好只在CSS文件中 - 这可以防止重复，并且您可以更轻松地定位代码 *如果不需要，可以防止相对定位，您可以使用边距和填充轻松地在块之间创建空间 *如果不需要，可以防止设置块的百分比高度

我/你的来源：，你可以尝试一下，也许让我知道：）

HTML：

<body id="top">

    <!-- MAIN IMAGE -->
    <div id="auto">
        <center><img src="images/car.JPG" alt="car" name="image" width="248" height="145" id="image" /></center>
    </div>

    <!-- SITE NAME -->
    <div id="header">
        <p>####</p>
    </div>


    <!-- MAIN LINKS -->
    <div>
        <ul id="buttons">
            <li><a href="index.html">home</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="search.html">search</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </div>


    <!-- MFR TABLE -->
    <div id="links">
        <table cellpadding="5" cellspacing="5" id="mfr">
            <tr>
                <td class="links"><img  width="116" height="106" /></td>
                <td class="links"><img  width="177" height="82" /></td>
                <td class="links"><img  width="148" height="118" /></td>
                <td class="links"><img  width="190" height="111" /></td>
                <td class="links"><img  width="102" height="115" /></td>
                <td class="links"><img  width="136" height="136" /></td>   
            </tr>
        </table>
    </div>

</body>

CSS：

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    border-color: #4E4E4E;
    padding: 50px;  
    font-size: 20px;
}

img {
    border: 1px solid gray;
}

a {
    text-decoration: none;
    color:#FFF;
}

#auto {
    text-align: center;
}

#header p {
    font-size:60px;
    color: #7F7F7F;
    text-align: center;
    margin: 20px 0;
}

#buttons {
    font-size: 25px;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}

#buttons li {
    display: inline-block;
    background-color:#616161;
    padding: 5px;
}

#buttons li a {
    color:#E5E5E5;
}

#mfr {
    margin: 0 auto;
}

.links {
    background-color: white;
    color: black;
    font-size: 18px;
    border-radius: 5px;
}

.visit {
    background-color:#771C2E;
    color: #FFF;
    font-size: 18px;
    border-radius: 5px;
    width:330px;
}

我的页面不会＃39;正确居中并使用浏览器窗口调整大小

1 个答案: