0

我在编写我打算进行创意的设计时遇到问题。现在，我有一个包含 3 个独立区域的标题，中间一个 div 宽度为 30%，两侧两个宽度为 35%。在这些中，我包含我的标题元素。中间一个包含我的徽标，可以很好地缩放。当我重新调整窗口大小时，它会缩小并保持它在 div 内的定位。

当我尝试在任一侧添加导航时，就会出现问题。我目前在第一个 div 中有导航文本，但它的行为并不符合我的预期。我有它相对定位，它不保持该定位。当浏览器重新调整大小时，文本保持固定，所以在某些时候，随着 div 变小，文本完全在它包含的 div 之外。此外，在某些时候，文本开始堆叠而不是保持它的内联样式。我有一个单独的样式表，其中包含一些字体大小的媒体查询来解决这个问题，它们只是以一定的间隔降低字体大小，但这没有任何作用。文本变得更小，但仍然固定在重新调整大小并开始堆叠。

我根本无法弄清楚为什么会这样。徽标图像完美地保留在其 div 中并保持其位置，而文本根本不移动。我想我只是不理解文本属性以及我需要的我已经包含了下面的 HTML 和 CSS，我省略了媒体查询，因为它非常不言自明。

<div id=container>

<div id=header>

    <div id=headerone>
        <div id=leftnav>
            <ul>
                <li>Home</li>
                <li>Services</li>
            </ul>
          </div>
    </div>

    <div id=headertwo>
    <img src="images/title.png">
    </div>

    <div id=headerthree>
    </div>


</div>

和 CSS

html, body {
    width: 100%;
    height: 100%;
    margin:0;
    font-size: 100%;
    padding:0;
}
img {
    max-width:100%; 
    width: 100%;
}
ul {
    list-style: none;
}
ul li{
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 20px;
}
#container{
    width: 100%;
    height: 100%;
}
#header{
    background-size: auto 100%;
    width: 100%;
    height: 19.1%;
    background-image: url(images/headerbg2.jpg);
}
#header img{
    width: 70%;
    position: relative;
    left: 15%;
    top: 30%;
}
 #headerone{
    width: 35%;
    height: 100%;
    float: left;
    background-color:black;
}
#leftnav{
    word-break:keep-all;
    font-size: 1.5em;
    position: relative;
    left:10%;
    top: 40%;
    font-family:Rockwell Extra Bold, Georgia, "Times New Roman", Times, serif
}
#headertwo{
    width: 30%;
    height: 100%;
    float: left;
}
#headerthree{
    width: 35%;
    height: 100%;
    float: left;
    background-color:green;
}

我很感激任何帮助。

4

0 回答 0