Question

我正在尝试使用Codeacademy学习HTML / CSS和JavaScript + jQuery，并在我自己的小项目上练习。但是，我遇到了一个非常简单的问题：

我希望在整个页面上显示父div。我能成功地做到这一点（见fiddler）。但是，当我调整浏览器屏幕的大小时;我的父div不再适合整个页面，这导致其最右边的div显示在父div之外（参见fiddler）。基本上，我希望我的父div总是包装其子div，并始终显示在整个屏幕上。

Fiddler Links：

相关CSS：

/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}

#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}

#lastlink {
border: none;
}

/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto; 
font-size: 24px;
text-align: left;
line-height: 65px; 
width: 175px;
border-right: 1px solid #bdbdbd;
}

任何帮助将不胜感激。我已经浏览了很多谷歌搜索和其他stackoverflow帖子，但似乎没有什么对我有用，除非我完全错过了一个合适的帖子。使用诸如“overflow：hidden”之类的东西或者创建一个包装器div并不适合我。提前感谢您的任何建议。如果有人能指出我可能错过的合适的帖子，那将是很棒的。

Answer 1

如何摆脱标签内的div标签。因为您可以使用带标记的类。

请查看StackOverflow用户starx

提供的以下示例

CSS

a.divlink { 
     display:block;
     width:500px;
     height:500px; 
     float:left;
}

HTML

<div>
    <a class="divlink" href="yourlink.html">
         The text or elements inside the elements
    </a>
    <a class="divlink" href="yourlink2.html">
         Another text or element
    </a>
</div>

Click here for more details

Answer 2

我设法找到了解决问题的方法。问题不在于我的无效标记;它实际上是我的#topnav ID的CSS。这是我如何更改该ID以获得我想要的结果：

#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}

密钥更改低于height属性。

屏幕调整大小时，父div不包装子div

2 个答案: